ページの表示に影響を与えずに特定の HTML コンテンツを印刷するにはどうすればよいですか?

ページ表示に影響を与えずに特定の HTML コンテンツを印刷する

Web 開発では、ボタンがクリックされたときに特定の HTML コンテンツを印刷する必要があるシナリオに遭遇することがあります。ページの現在の表示が中断されます。あなたが言及したものを含む、さまざまな解決策が存在します。コンテンツを非表示の div に配置する

ただし、CSS メディア クエリを使用すると、より効率的なアプローチを実現できます。

@media print {
  .noPrint{
    display:none;
  }
}
h1{
  color:#f6f6;
}

ここでは、 「noPrint」というクラスは、印刷すべきでない要素に適用されます。印刷ダイアログが開くと、@media 印刷ブロック内で定義されたスタイルが適用され、Web ページの元の外観を維持しながらこれらの要素が非表示になります。

<h1>
print me
</h1>
<h1 class="noPrint">
no print
</h1>
<button onclick="window.print();" class="noPrint">
Print Me
</button>

このコードでは、「print me」見出しがは印刷されますが、「noPrint」クラスの要素は非表示になります。この方法により、印刷出力の柔軟性と制御が向上し、意図したコンテンツのみがプリンターに送信されるようになります。

以上がページの表示に影響を与えずに特定の HTML コンテンツを印刷するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。