상황: 페이지의 일부만 프린트하고 싶다!
구글링 하면 2가지 방법이 나온다.
근데 둘다 내 상황에는 문제점이 있었다.
- 팝업으로 DOM을 복사해 프린트: 편하긴 한데 css, js가 떨어짐
- 전체 돔, 프린트 영역 원하는 돔 따로 저장한다음에 프린트영역만 살리고 프린트 후 전체 돔 살림: 편하긴 한데 js 이벤트 바인딩이 떨어짐
아래와 같이 display noneblock 을 toggle 해주는걸로 간단히 해결 가능하다.
React 사용중이라 jquery 말고 pure javascript로 코딩했다.
onPrint() { const html = document.querySelector('html'); const printContents = document.querySelector('.modal-body').innerHTML; const printDiv = document.createElement("DIV"); printDiv.className = "print-div"; html.appendChild(printDiv); printDiv.innerHTML = printContents; document.body.style.display = 'none'; window.print(); document.body.style.display = 'block'; printDiv.style.display = 'none'; }