[Javascript]원하는 HTML 영역 프린트하기

스크린샷 2017-03-28 오전 10.48.19스크린샷 2017-03-28 오전 10.49.44

상황: 페이지의 일부만 프린트하고 싶다!

구글링 하면 2가지 방법이 나온다.
근데 둘다 내 상황에는 문제점이 있었다.

  1. 팝업으로 DOM을 복사해 프린트: 편하긴 한데 css, js가 떨어짐
  2. 전체 돔, 프린트 영역 원하는 돔 따로 저장한다음에 프린트영역만 살리고 프린트 후 전체 돔 살림: 편하긴 한데 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';
}
Advertisements

Published by

JayJin

아름다운 웹과 디자인, 장고와 리액트, 그리고 음악과 먹방을 사랑하는 망고장스터

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s