window.print() 사용법

목차 1. window.print() 기능 2. window.print() 장점 3. window.print() 단점 4. 기본 사용법 5. 고급 사용법

 

 1. window.print() 기능

 window.print()는 자바스크립트 함수로, 현재 웹 브라우저 창에 표시된 내용을 프린터로 출력.
 웹 개발에서 자주 사용되는 기능이며, 프린트 버튼 클릭 시 자동으로 호출되기도 한다.

 

 2. window.print() 장점

1) 간편하게 웹 페이지 프린트 가능
2) 프린트 영역 및 옵션 설정으로 원하는 내용만 출력 가능
3) 자바스크립트로 동적으로 프린트 제어 가능

 

 3. window.print() 단점

1) 모든 브라우저에서 동일하게 작동하지 않을 수 있음
2) 프린터 설정에 따라 출력 결과 달라질 수 있음
3) 복잡한 페이지 프린트 시 문제 발생 가능성

 

 4. 기본 사용법

1) window.print() 호출
 현재 웹 페이지 전체를 프린터로 출력

window.print();

2) 프린트 영역 지정
 특정 영역만 프린트하고 싶다면 document.getElementById() 또는 document.querySelector()를 사용하여 해당 요소를 선택한 후 print() 메서드를 호출

var printArea = document.getElementById('print-area'); printArea.print();

3) 프린트 옵션 설정
 window.print() 함수는 프린트 옵션을 설정하는 객체를 매개변수로 받을 수 있습니다.

window.print({   pageTitle: "My Webpage",   media: "print",   landscape: true,   margins: [10, 15, 20, 25],   copies: 2 });

 옵션 객체 속성

속성	설명
pageTitle	프린트 출력물 제목
media	프린트 매체 (예: "screen", "print")
landscape	가로 방향 프린트 여부
margins	여백 설정
copies	출력 부수

 

 5. 고급 사용법

1) @media print 사용법으로 프린트 스타일 조정
 CSS @media print 규칙을 사용하여 프린트 시 적용되는 스타일을 별도로 정의할 수 있다.
 이를 통해 화면 출력과 프린트 출력 시 서로 다른 스타일을 적용할 수 있다.

@media print {   #header, #footer {         display: none;   }   body {         font-size: 12pt;   } }

2) 프린트 헤더/푸터 추가
 window.onafterprint 이벤트를 사용하여 프린트 헤더/푸터의 추가가 가능하다.

window.onafterprint = function() {     var header = document.createElement('h1');     header.textContent = "프린트 헤더";     document.body.appendChild(header);     var footer = document.createElement('footer');     footer.textContent = "프린트 푸터";     document.body.appendChild(footer); };

 위의 이벤트는 프린트 작업이 완료된 후 발생