優點

• 您的頁面在列印後保留互動
• 與框架配合良好
• 不需要複製 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;