ホームページ > ウェブフロントエンド > CSSチュートリアル > 「window.print()」を使用するときに不要なヘッダーとフッターを削除するにはどうすればよいですか?

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

DDD
リリース: 2024-12-07 13:28:14
オリジナル
906 人が閲覧しました

How to Eliminate Unwanted Headers and Footers When Using `window.print()`?

window.print() でヘッダーとフッターを非表示にする方法

Web ページを印刷するために window.print() を呼び出すと、不要なヘッダーが表示されます。フッターが表示され、ページ タイトル、ファイル パス、ページ番号、日付が表示される場合があります。このガイドでは、これらの追加要素を削除する方法を説明します。

解決策:

Chrome では、CSS ルール @page を利用して自動ヘッダーとフッターを非表示にします:

@page {
  margin: 0;
}
ログイン後にコピー

コンテンツがページの境界まで拡張されると、印刷ヘッダーとフッターが冗​​長になります。ただし、コンテンツがページの端を超えて拡大しないように、body 要素には必ずマージンまたはパディングを指定してください。通常、プリンタは余白なし印刷をサポートしていないため、次の点を考慮してください:

@media print {
  @page {
    margin: 0;
  }
  body {
    margin: 1.6cm;
  }
}
ログイン後にコピー

ただし、コンテンツが複数のページにまたがる場合、余白が不均一なために印刷レイアウトが歪んで見える場合があります。最初のページには 1.6cm の上余白があり、最後のページには 1.6cm の下余白があり、中間ページには余白がなくなります。

この解決策は、この記事の執筆時点 (5 月) では Chrome で有効でしたが、 2013)、他のブラウザ間の互換性は変動しています。他のブラウザのサポートが必要な場合は、PDF を動的に生成し、代わりにそれを印刷することを検討してください。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート