BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] ブラウザの印刷オプション（ヘッダー、フッター、マージン）をページから無効にする？

2022-04-14 07:42:23

質問

この質問はSOや他のいくつかのウェブサイトでいくつかの異なる方法で質問されているのを見ましたが、そのほとんどは具体的すぎたり、古かったりします。憶測に迎合することなく、誰かがここで明確な答えを出してくれることを望んでいます。

CSSまたはjavascriptで、誰かがブラウザ内で印刷するときのデフォルトのプリンタ設定を変更する方法はありますか？もちろん、「ブラウザから印刷する」というのは、PDFやその他のプラグインに依存したMIMEタイプではなく、何らかのHTMLの形式を意味します。

ご注意ください。

もし、あるブラウザにはあって、他のブラウザにはない場合（あるいは、あるブラウザでしか方法がわからない場合）、ブラウザ固有の解決策を歓迎します。

同様に、もしあなたが、これを行うEVERに対して特定の制限を持つ主流のブラウザを知っているなら、それも有用ですが、かなり最新のドキュメントがあればありがたいです。(単に "that goes against XYZ's security policy" と言っても、XYZが過去3年間にそのポリシーに大きな変更を加えた場合には、あまり説得力がありません).

最後に、私が「デフォルトの印刷設定を変更する」と言ったとき、それは永久にという意味ではなく、私のページのためだけにという意味です。また、特に印刷マージン、ヘッダー、フッターについて言及しています。

CSSでは、ページの余白だけでなく、ページの向きも変更できることは重々承知しています。多くの苦労があるのは、Firefoxの場合です。ページマージンを1インチに設定すると、すでに設定されている半インチに追加されてしまうのです。

クライアントのサイトでのPDFの使用を減らしたいのですが、プレゼンテーションの侵害（および信頼性の欠如）が主な懸念事項となっています。

解決方法は？

CSS標準では、いくつかの高度な書式設定が可能です。そこには @page このディレクティブは、ページングされたメディア（紙など）にのみ適用される書式を有効にします。参照 http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .

欠点は、異なるブラウザでの動作が一定でないことです。Safariはまだプリンタページのマージン設定にまったく対応していませんが、他の主要なブラウザはすべて対応しています。

を使用すると @page ディレクティブを使用すると、ページのプリンタマージンを指定できます（HTML 要素の通常の CSS マージンとは異なります）。 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
    @page 
    {
        size:  auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

なお、ここでは基本的にページ固有のマージンを無効にして、ヘッダーとフッターを削除する効果を得ているので、ボディに設定したマージンは、改ページ時に（たとえば コメント：Konrad つまり、印刷物が1ページだけの場合のみ、正常に動作します。

では動作しません。 Firefox 3.6 , IE 7 , サファリ 5.1.7 または Google Chrome 4.1 .

ページマージンを設定すると IE 8 , オペラ10 , グーグルクローム21 と Firefox 19 .

これらのブラウザでは、コンテンツに対してページマージンが正しく設定されていますが、ヘッダー/フッターの非表示を解決しようとすると、この動作は理想的ではありません。

ブラウザによって、このような挙動になります。

  • で インターネットエクスプローラー の場合、実際にはこの印刷の設定でマージンが0mmに設定されており、プレビューを行うとデフォルトで0mmになりますが、ユーザーがプレビューで変更することが可能です。

    ページコンテンツが実際に 配置 は正しく表示されますが、ブラウザの印刷用ヘッダーとフッターは非透過の背景で表示されるため、その位置のページコンテンツは効果的に隠されています。

  • で ファイアフォックス 新しいバージョンでは 位置づけ は正しく表示されますが、ヘッダー/フッターテキストとコンテンツテキストの両方が表示されるため、ブラウザのヘッダーテキストとあなたのページのコンテンツが混ざったような悪い状態に見えます。

  • で オペラ の場合、標準cssで非透明な背景を使用すると、ページコンテンツがヘッダーを隠し、ヘッダー/フッターの位置がコンテンツと競合します。かなり良いが、ヘッダーが部分的に見えるようになるmarginが小さな値に設定されている場合、奇妙に見える。また、ページマージンも正しく設定されていない。

  • で クローム の新しいバージョンでは、@ページのマージンが小さく設定され、ヘッダー/フッターの位置がコンテンツと競合する場合、ブラウザーのヘッダーとフッターが非表示になります。私の意見では、これはまさにこのように動作するべきだと思います。

ということで、結論は クローム は、ヘッダー/フッターの非表示に関して、最も優れた実装を持っています。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します