장점

• 인쇄 후에도 페이지의 상호작용이 유지됩니다.
• 프레임워크와 잘 작동합니다.
• 인쇄를 위해 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;