利点

• 印刷後もページのインタラクティブ性が維持されます
• フレームワークとうまく連携
• 印刷用に UI を複製する必要はありません

ステップ

1. 印刷モード時にページのすべてのコンテンツを非表示にします
2. ターゲット要素を印刷モードで表示します

ステップ1

@media print {
  body {
    visibility: hidden;
  }
}

ステップ2

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

次に印刷します

const button = document.querySelector('print-page');

button.addEventListener('click', () => window.print());

この方法は、インタラクティブ性を失うという落とし穴を回避します。他の方法では、ページ コンテンツ全体が静的 HTML に置き換えられるため、インタラクティブ性が失われます。

const printContents = document.getElementById(divId).innerHTML;
const originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = originalContents;