Web ページの印刷オプションをカスタマイズしてヘッダー、フッター、マージンを無効にすることはできますか?

ブラウザの印刷オプションのカスタマイズ: ヘッダー、フッター、マージンの無効化

多くの開発者は、Web ページからの印刷エクスペリエンスを強化しようとしています。 。ただし、ヘッダー、フッター、余白などのブラウザーのデフォルトの印刷設​​定が目的のプレゼンテーションを妨げると、フラストレーションが生じます。 CSS または JavaScript を使用してこれらの設定をカスタマイズする解決策はありますか?

CSS の @page ディレクティブ

CSS 仕様には @page ディレクティブが用意されており、開発者はこれを利用できます。印刷ドキュメント専用の書式設定オプションを定義します。 @page では、ページのサイズ、向き、余白を指定できます。

<br>@page {<br> size: auto;<br> margin: 0mm;<br> }<br>

マージンを 0mm に設定すると、ブラウザのデフォルトのマージンが事実上無効になります。ただし、このアプローチには制限があります。

ブラウザの非互換性と考慮事項

残念ながら、@page に関するブラウザの動作は大きく異なります。 Chrome や Firefox などの最新のブラウザは @page をサポートしていますが、Firefox 3.6 や Internet Explorer 7 などの古いバージョンはサポートしていません。さらに、Safari では、プリンターのページ余白の設定がまだサポートされていません。

サポートされているブラウザーであっても、結果が理想的でない可能性があります。たとえば、Internet Explorer で余白を 0mm に設定しても、ヘッダー/フッターは非表示になりませんが、ブラウザーの不透明なヘッダー/フッターがオーバーレイされてページ コンテンツが正しく配置されます。

Firefox では、@ページマージン設定は適用されますが、ブラウザのヘッダー/フッターとページコンテンツの両方が表示されるため、ブラウザコントロールとコンテンツが混在します。

Opera は Firefox と同様に動作しますが、デフォルト以外のマージンによりヘッダーが表示されます。

カスタム マージンの最適なソリューション

Chrome は、このシナリオに最も適切な動作を備えたブラウザとして登場しました。 @page マージンをヘッダー/フッターの位置と競合するほど小さく設定することで、Chrome は効果的にそれらを非表示にします。

この方法は、印刷される特定のページのマージンにのみ影響することに注意することが重要です。ブラウザの全体的な印刷設定には影響しません。

結論

Web ページからの印刷中にヘッダー、フッター、およびマージンを無効にすると、ブラウザーの不一致により問題が発生します。 CSS の @page ディレクティブはいくつかのカスタマイズ オプションを提供しますが、その有効性はブラウザーによって異なります。 Chrome は現在、ページの余白が位置と競合することを許可することで、ヘッダーとフッターを非表示にするための最適なソリューションを提供しています。ただし、ブラウザの更新や今後の開発により、この動作が変更される可能性があります。

以上がWeb ページの印刷オプションをカスタマイズしてヘッダー、フッター、マージンを無効にすることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。