JavaScript
- 원하는 부분만 인쇄
-
-
//원하는 부분 인쇄//
var initBody
function beforePrint(){
initBody = document.body.innerHTML;
document.body.innerHTML = mapContainer.innerHTML;
}
function afterPrint(){
document.body.innerHTML = initBody;
}
function printArea() {
window.print();
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
//인쇄 스크립트 끝//
[소스 설명]
먼저 각 이벤트가 발생하는 시점을 보면....
onbeforeprint : 관련된 문서를 인쇄하거나 인쇄 미리보기하기 바로전에 발생
onafterprint : 관련된 문서를 인쇄하거나 인쇄 미리보기한 후 즉시 발생
이와 같습니다.
작동은
우선 beforePrint() 함수를 보면..
function beforePrint(){
// initBody라는 변수에 현제 페이지의 body태그 안에 있는 모든 HTML 소스를 저장하고
initBody = document.body.innerHTML;
// 현제 페이지의 body태그 안에 내용을 <div id = pnt_dv></div> 안에 있는 HTML 소스들로 대체합니다.
document.body.innerHTML = pnt_dv.innerHTML;
}
이상태에서 인쇄나 인쇄 미리보기를 실시하여 <div id = pnt_dv></div> 안에 있는 HTML 소스에 대해서 인쇄가 되고 인쇄를 마치면 afterPrint() 함수를 실행하죠
function afterPrint(){
// 다시 문서의 body태그 안에 내용을 앞에서 저장해둔 기존의 HTML소스(initBody)로 되돌려 놓습니다.
document.body.innerHTML = initBody;
}
