「window.print()」を使用するときにヘッダーとフッターを削除するにはどうすればよいですか?

'window.print()' からヘッダーとフッターを削除する

window.print() を利用してページを印刷する場合、次のようにすることができます。タイトル、パス、ページ番号、日付などのページの詳細を表示するヘッダーとフッターで問題が発生します。これらは気が散り、目的の印刷出力を妨げる可能性があります。

この問題に対処するために、Chrome ブラウザーで有効な解決策が発見されました (2022 年 10 月現在、Firefox でも機能します)。次のスタイルシートを使用すると、Chrome が生成する自動ヘッダーとフッターを抑制できます:

@page { margin: 0; }

このスタイルシートはページの余白をゼロに設定し、コンテンツがページの端まで広がります。その結果、通常は印刷可能領域の外に表示されるヘッダーとフッターが事実上非表示になります。

コンテンツがページの境界からはみ出さないようにするには、ページ要素にマージンまたはパディングを設定することをお勧めします。 :

@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

この例では、ページの上部と下部に 1.6 cm の余白が適用され、コンテンツが印刷可能な範囲内に残るようにします。

コンテンツが大きすぎて複数のページが必要な場合、このソリューションでは最適な結果が得られない可能性があることに注意することが重要です。最初のページのみ上マージンがあり、最後のページのみ下マージンがあります。中間ページには余白がなく、これは望ましくない可能性があります。

このスタイルシートを効果的に処理できないブラウザをサポートする必要がある場合は、オンザフライで PDF を作成して印刷するなどの代替ソリューションが必要になる場合があります。これらのメソッドは実装が複雑で時間がかかる場合があります。

以上が「window.print()」を使用するときにヘッダーとフッターを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。