ページ全体を印刷せずに、ボタンのクリック時に特定の HTML 要素を印刷するにはどうすればよいですか?

ページを印刷せずに、ボタンのクリック時に HTML 要素を印刷します

このシナリオでは、ボタンによってトリガーされる HTML コンテンツを印刷するメソッドを探します。 Web ページ全体を印刷出力にキャプチャせずにクリックします。次の解決策を検討してください。

CSS 印刷メディア ルール

CSS 印刷メディア ルールを使用すると、印刷目的のみにコンテンツを選択的に表示できます。これを実装する方法は次のとおりです。

<code class="css">/* CSS file */

@media print {
  /* Hide any element you don't want to print */
  .noPrint {
    display: none;
  }

  /* Set elements you want to print to display */
  h1 {
    color: #f6f6;
  }
}

/* Elements in the HTML page */

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

説明

• @media 印刷ルールは、印刷メディアに固有のスタイルを定義します。
• noPrint クラスの要素は、印刷時に非表示になります (display: none を使用)。

• 印刷したいコンテンツを含む要素は、印刷メディアに表示されるように設定されており、独特の色を持っています。

• [印刷する] ボタンをクリックすると、window.print() が呼び出され、変更されたページが印刷されます。必要な要素のみが含まれるようになりました。

利点

• 不要なコンテンツの印刷を回避します。
• クリーンで整然とした状態を維持します。出力を印刷します。
• 柔軟なコンテンツ制御が可能になり、関連する情報のみが印刷されるようになります。

以上がページ全体を印刷せずに、ボタンのクリック時に特定の HTML 要素を印刷するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。