CSS を使用して特定の HTML 要素のみを印刷するにはどうすればよいですか?

特定の HTML 要素のみを印刷する方法

div などの特定の HTML 要素のみを印刷するタスクは、多くの場合、ウェブ開発。ただし、他のページ コンテンツの表示を無効にせずにこれを実現するのは困難な場合があります。

この問題に対処するために、ページの残りの部分を隠しながら目的の要素を印刷できる CSS ソリューションが存在します。次のコードを実装すると、印刷中に印刷したい div を除いてページ全体が非表示になるように指定できます:

@media print {
  body {
    visibility: hidden;
  }
  #section-to-print {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }
}

このコードでは、印刷したい div に ID が割り当てられます。 「セクションから印刷まで」。ブラウザが印刷モードになると (ユーザーの印刷コマンドによってトリガーされます)、指定された @media ルールがアクティブになります。

このルールは、body タグの表示プロパティを「hidden」に設定し、すべてのページ要素をレンダリングします。見えない。ただし、ID「section-to-print」を持つ div の可視性は明示的に「visible」に設定されています。

さらに、適切な印刷を保証するために、div は絶対位置に配置され、左上隅に配置されます。ページの。これにより、印刷中に希望の場所に確実に表示されます。

このメソッドを使用すると、追加のダイアログを表示したり、ページの構造を操作したりすることなく、特定の div を選択的に印刷できます。これは、特定の HTML 要素の印刷が必要な状況にクリーンで効果的なソリューションを提供します。

以上がCSS を使用して特定の HTML 要素のみを印刷するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。