ページ全体を印刷せずに、ボタンをクリックしたときに特定の HTML コンテンツを印刷するにはどうすればよいですか?

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

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

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

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

<code class="javascript">// 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';</code>

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

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