웹페이지를 하다보면 사용자로 하여금 출력물을 프린트할 수 있도록 하면 좋다. 자바스크립트에서는 프린터로 출력하는 함수인 window.print() 함수를 제공한다. 단 웹페이지 전체가 프린트 영역이기 때문에 꼭 프린터 출력을 위한 영역만을 지정할 필요가 있다.
자바스크립트 프린트 지정 영역 출력하기
window.print() 사용
프린트 출력을 하기 위해 자바스크립트는 window.print() 함수를 제공한다.
이것은 웹페이지를 프린터를 이용해 출력할 수 있는 기능이다.
전체 페이지를 출력하는 것은 상관없지만 특정 영역을 지정하여 프린트출력을 할 경우 프린트 제어 이벤트를 설정해 주어야 한다.
이 때 사용하는 이벤트 핸들러는 window.onbeforeprint , window.onafterprint 이다.
웹페이지 프린터 출력하기
웹페이지를 프린트 출력을 하기 위해 window.print() 함수를 사용한다.
이것을 사용하면 현재 웹페이지의 내용을 프린터를 이용해 프린트 출력할 수 있다.
아래는 window.print() 함수를 사용하여 프린트 출력을 하는 코드이다.
<!DOCTYPE html>
<html>
<body>
<h1>직접 출력하기</h1>
<p id="print">출력되는 영역</p>
<p id="InText">두번째 문단</p>
<button onclick="return window.print();">프린터 출력</button>
</body>
</html>프린터로 출력을 하기 위한 미리보기 화면이 먼저 나타나는 것을 알 수 있다.
하지만, 이것만 가지고는 사용자 측면에서 뭔가 부족하다.
특정 영역만 지정하여 출력하고 싶을 경우에는 이벤트 핸들러를 지정한다.
영역을 지정하여 출력하기
영역을 지정하여 프린트 출력을 하고자 할 때는 이벤트 핸들러를 추가한다.
아래는 간단한 코드이다.
window.onbeforeprint 이벤트와 window.onafterprint 이벤트 핸들러에 콜백함수를 지정한다.
해당 콜백함수에 지정된 작업을 수행하면 된다.
- window.onbeforeprint
- 프린트 출력 이전 이벤트 발생
- 미리보기시 콜백함수 실행 - window.onafterprint
- 프린트 출력 이후 이벤트 발생
- 미리보기 취소 후 또는 프린트 완료 후 실행
<!DOCTYPE html>
<html>
<body>
<h1>직접 출력하기</h1>
<p id="print">출력되는 영역</p>
<p id="InText">두번째 문단</p>
<button onclick="return printPage();">영역 지정 프린터 출력</button>
<script>
var initBodyHtml;
function printPage() {
window.print();
}
function beforePrint() {
initBodyHtml = document.body.innerHTML;
document.body.innerHTML = document.getElementById('print').innerHTML;
}
function afterPrint() {
document.body.innerHTML = initBodyHtml;
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
</script>
</body>
</html>지정된 영역만 출력할 수 있는 것을 알 수 있다.
실행되는 것 중 초기화 변수인 initBodyHtml 변수를 눈여겨 보도록 하자.
미리보기 화면이 나오면서 웹페이지 또한 지정된 영역으로 변환되는 것을 확인할 수 있다.
그렇기에 미리보기 화면이 나오기 전에 원본 웹페이지 내용을 초기화 변수에 먼저 넣는다.
이후 지정된 영역을 미리보기 한 후 초기화 변수에 있던 내용을 다시 웹페이지에 적용한다.
이것이 좀 단점이다.
직접 위의 코드를 실행하면 이해할 수 있다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 변수 var 사용법과 변수 작성 규칙 (0) | 2021.10.08 |
|---|---|
| 자바스크립트 주석 처리 사용 방법 javascript comment (0) | 2021.10.05 |
| 자바스크립트 구문 익히기 다른 프로그래밍 언어와 비슷하다 (0) | 2021.09.25 |
| 자바스크립트 브라우저 콘솔 출력 console.log 사용 방법 javascript output (0) | 2021.09.23 |
| 자바스크립트 메세지창 window.alert 사용 방법 javascript output (0) | 2021.09.19 |
댓글