ボタンのクリックで特定の HTML コンテンツを印刷する方法

ボタンのクリックで特定の HTML コンテンツを印刷したい場合は、ウェブページ全体。包括的なアプローチは次のとおりです:

メディア クエリの活用

CSS で印刷用のメディア クエリを強調するのはクリーンな解決策です:

@media print {
  .noPrint {
    display: none;
  }
}

これにより、印刷時に「noPrint」クラスの要素が非表示になります。

CSS セレクターの適用

特定の CSS で印刷する要素を指定しますセレクター:

  print me


  no print

ボタン クリック イベントの実装

ボタンにクリック イベントを付加して印刷を開始します:

  Print Me

利点

この方法は、印刷中に無関係な要素を効果的に非表示にし、明瞭さを保ち、乱雑さを回避します。また、Web サイトの画面表示の外観を維持し、ユーザー エクスペリエンスを向上させます。