CSS と JavaScript を使用してデフォルトのブラウザーの印刷設定を上書きするにはどうすればよいですか?

Web ページからの印刷出力に対するデフォルトのブラウザ印刷設定の無効化

多くの Web 開発者は、特に Web ページからの印刷のデフォルトのブラウザ印刷設定を変更するソリューションを探してきました。ヘッダー、フッター、余白。この記事は、さまざまなブラウザーで CSS と JavaScript を通じて使用できるオプションを包括的に理解することを目的としています。

CSS ソリューション

CSS の @page ディレクティブは高度な書式設定を提供します紙などのページ付きメディアのオプション。これにより、要素のマージンとは関係なく、ページ専用のプリンター マージンを指定できます。

@page {
    margin: 0mm;
}

ただし、このディレクティブのサポートはブラウザーによって異なります。 Safari、Internet Explorer、Opera、Chrome などのブラウザはプリンターのページ余白の設定をサポートしていますが、Firefox はまだサポートしていません。

改ページとコンテンツの余白のカスタマイズ

に加えて、印刷マージン、CSS を使用してヘッダーを削除し、ページ区切りとコンテンツのマージンを制御できます。 footers.

body {
    margin: 10mm 15mm 10mm 15mm;
}

印刷時、ブラウザは本文の余白で指定された領域のコンテンツを抑制し、ページのヘッダーとフッターを事実上非表示にします。ただし、これは印刷コンテンツが 1 ページに収まる場合にのみ機能することに注意してください。

ブラウザの動作

これらの設定の動作はブラウザによって異なります。

• Internet Explorer: 正しい印刷マージンを設定しますが、ブラウザーのヘッダー/フッターを不透明な背景で表示し、 content.
• Firefox: コンテンツを正しく配置しますが、ブラウザーのヘッダー/フッター テキストとコンテンツ テキストの両方が表示されるため、混合表示になります。
• Opera: ヘッダーは非表示になりますが、マージンが適切に設定されていません。潜在的なヘッダーの可視性の問題につながります。
• Chrome: ページの余白がその位置と競合する場合、ブラウザーのヘッダー/フッターを非表示にし、これらを非表示にするための最適な実装を提供します。 elements.

結論

CSS は印刷設定に対処するメカニズムを提供しますが、ブラウザーのサポートと動作は異なります。 Chrome は、ヘッダーとフッターを非表示にするために最も望ましい動作を示します。ただし、ブラウザ間での一貫性が重要な場合は、代替ソリューションを検討する必要がある場合があります。

以上がCSS と JavaScript を使用してデフォルトのブラウザーの印刷設定を上書きするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。