Web ページ全体を含めずにボタンのクリック時に特定の HTML コンテンツを印刷する

ユーザーのボタンのクリック時に特定の HTML コンテンツのみを印刷することは、さまざまな方法で実現できます。方法。 1 つの方法は、目的の HTML を保持する非表示の div 要素を作成することです。この div は、印刷目的のためにその表示プロパティを「print」に設定する必要がありますが、画面表示のためにその表示値は「none」のままです。ページ上の他の要素の表示プロパティを調整して、画面上に表示され、印刷中に非表示になるようにすることができます。ただし、この方法では、すべてのページ要素の表示プロパティを細心の注意で管理する必要があります。

別の方法としては、印刷する HTML コンテンツのみを含む新しい独立した Web ページを作成することです。ユーザーが印刷ボタンをクリックすると、この新しいページを非表示の iframe に動的にロードできます。 iframe が完全にロードされると、ブラウザの印刷機能がトリガーされ、埋め込まれた HTML が不要なページ要素なしで印刷されます。この方法では、印刷プロセスの柔軟性と動的制御が向上します。

2 番目の方法を使用した例を次に示します:

// Create an invisible iframe to hold the print-only HTML
const printFrame = document.createElement('iframe');
printFrame.style.display = 'none';
document.body.appendChild(printFrame);

// Dynamically load the print-only HTML into the iframe
printFrame.onload = function() {
  // Trigger the browser's print function once the print-only page is loaded
  window.print();
}
printFrame.src = 'print-only.html';

このソリューションを使用すると、メイン Web ページの外観やコンテンツを変更することなく、ボタンをクリックすると特定の HTML コンテンツを簡単に印刷できます。これにより、意図した HTML のみが印刷されるようになり、よりユーザーフレンドリーな印刷エクスペリエンスが提供されます。