ボタンをクリックしたときに選択した HTML コンテンツのみを印刷するにはどうすればよいですか?

ボタンのクリック時に HTML コンテンツを選択的に印刷する

Web 開発者は、ユーザーが Web ページの特定のセクションを印刷できるようにする必要があることがよくあります。ページのコンテンツ全体。この文脈で、次のような疑問が生じます:

ボタンがクリックされたときに、ページの残りの部分を除外して、選択された HTML コンテンツのみを印刷するにはどうすればよいでしょうか?

解決策:

非表示の HTML コンテンツを表示に保持するための推奨解決策: print div は有効なアプローチです。ただし、より簡単で効率的な方法があります。

印刷スタイルシートを作成します。

1. 次の内容を含む「print.css」という名前の CSS ファイルを作成します。コード:

<code class="css">@media print {
  .noPrint {
    display: none;
  }
}</code>

このコードは、ページの印刷時にクラス "noPrint" の要素を非表示にします。

2. NoPrint クラスを適用します:

印刷すべきでない HTML コンテンツを特定し、次のような要素にクラス「noPrint」を追加します。

<code class="html"><h1 class="noPrint">No Print</h1></code>

3. 印刷スタイルシート:

次の行を に追加します。 HTML ドキュメントのセクション:

<code class="html"><link rel="stylesheet" href="print.css" media="print"></code>

4. 印刷ボタンを追加します:

クリックすると印刷ダイアログをトリガーするボタンを作成します:

<code class="html"><button onclick="window.print()">Print</button></code>

説明:

印刷ボタンをクリックすると、window.print() メソッドが呼び出され、ブラウザの印刷ダイアログが開きます。 CSS メディア クエリ @media print { ... } がトリガーされ、クラス「noPrint」の要素が非表示になります。その結果、必要な HTML コンテンツのみが印刷されます。

以上がボタンをクリックしたときに選択した HTML コンテンツのみを印刷するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。