홈페이지를 제작하다가 특정영역을 인쇄하는 기능이 필요해서 나름대로 검색도 하고,
수정도 좀 하다가 보니 보통은 많은 인쇄기능을 PHP나 ASP와 같은 Server Script Language로 많이 연동해서 구현하고 있었다.
이런 Server Script Language를 써서 하는 방법이 그리 어려운 것은 아니지만,
이를 사용하지 않고 간단하게 하는 방법을 원했기 때문에 자료가 별로 없었고, 그래서 공유할만한 가치가 있다고 판단했다.
내가 알고 있는 방법을 정리하자면,
자바스크립트로 할 수 있는 방법은 아래와 같이 2가지가 있다.
1. 인쇄하는 동안만 웹사이트를 변형하여 특정내용만 남기는 방법.
이 방법의 경우 새창을 띄우지 않아도 되기 때문에 사용하기는 편하다는 장점이 있는 반면, 일시적으로 웹사이트가 변형될 수 있다.
특히나 포탈같이 웹사이트의 소스가 긴 경우 이를 소화하지 못하여 웹사이트가 자동복구 되지 않고 새로고침을 해야 할 수도 있다. 직접 간단한 테스트를 해봤을 경우는 정상작동하였으나, 소스가 길어지자 변형된 웹사이트가 자동복구되지 않는 현상을 발견할 수 있었다.
- <head>에 들어갈 자바스크립트 영역
- <body>에 들어갈 영역지정 방법
- 인쇄버튼
2. 특정영역의 내용을 하나의 문서로 만들어서 새창으로 띄우는 방법.
이 방법은 특정영역을 지정해 놓고, 인쇄버튼을 눌렀을 때 새창으로 특정영역을 그대로 복사하는 방법이다.
새문서를 만들어서 저장하지 않고, 자바스크립트로 동적으로 인쇄할 영역을 만들어내기 때문에 따로 저장공간이 필요하지도 않을뿐더러 인쇄미리보기의 효과도 볼수 있다.
하지만, 새창을 띄우는 것을 싫어하는 유저도 많이 있기 때문에 그다지 추천하지는 않는다.
- <head>에 들어갈 자바스크립트 영역
- <body>에 들어갈 영역지정 방법
- 인쇄버튼
수정도 좀 하다가 보니 보통은 많은 인쇄기능을 PHP나 ASP와 같은 Server Script Language로 많이 연동해서 구현하고 있었다.
이런 Server Script Language를 써서 하는 방법이 그리 어려운 것은 아니지만,
이를 사용하지 않고 간단하게 하는 방법을 원했기 때문에 자료가 별로 없었고, 그래서 공유할만한 가치가 있다고 판단했다.
내가 알고 있는 방법을 정리하자면,
자바스크립트로 할 수 있는 방법은 아래와 같이 2가지가 있다.
1. 인쇄하는 동안만 웹사이트를 변형하여 특정내용만 남기는 방법.
이 방법의 경우 새창을 띄우지 않아도 되기 때문에 사용하기는 편하다는 장점이 있는 반면, 일시적으로 웹사이트가 변형될 수 있다.
특히나 포탈같이 웹사이트의 소스가 긴 경우 이를 소화하지 못하여 웹사이트가 자동복구 되지 않고 새로고침을 해야 할 수도 있다. 직접 간단한 테스트를 해봤을 경우는 정상작동하였으나, 소스가 길어지자 변형된 웹사이트가 자동복구되지 않는 현상을 발견할 수 있었다.
- <head>에 들어갈 자바스크립트 영역
var initBody;
function beforePrint()
{
initBody = document.body.innerHTML;
document.body.innerHTML = print_page.innerHTML;
}
function afterPrint()
{
document.body.innerHTML = initBody;
}
function pageprint()
{
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
window.print();
}
- <body>에 들어갈 영역지정 방법
<div id='print_page'> 인쇄내용 </div>
- 인쇄버튼
<input type='button' value=' 인 쇄 ' onclick="pageprint()">
2. 특정영역의 내용을 하나의 문서로 만들어서 새창으로 띄우는 방법.
이 방법은 특정영역을 지정해 놓고, 인쇄버튼을 눌렀을 때 새창으로 특정영역을 그대로 복사하는 방법이다.
새문서를 만들어서 저장하지 않고, 자바스크립트로 동적으로 인쇄할 영역을 만들어내기 때문에 따로 저장공간이 필요하지도 않을뿐더러 인쇄미리보기의 효과도 볼수 있다.
하지만, 새창을 띄우는 것을 싫어하는 유저도 많이 있기 때문에 그다지 추천하지는 않는다.
- <head>에 들어갈 자바스크립트 영역
function pagePrint(Obj) {
var W = Obj.offsetWidth; //screen.availWidth;
var H = Obj.offsetHeight; //screen.availHeight;
var features = "menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes,width=" + W + ",height=" + H + ",left=0,top=0";
var PrintPage = window.open("about:blank",Obj.id,features);
PrintPage.document.open();
PrintPage.document.write("<html><head><title></title><style type='text/css'>body, tr, td, input, textarea { font-family:Tahoma; font-size:9pt; }</style>\n</head>\n<body>" + Obj.innerHTML + "\n</body></html>");
PrintPage.document.close();
PrintPage.document.title = document.domain;
PrintPage.print(PrintPage.location.reload());
}- <body>에 들어갈 영역지정 방법
<div id='print_page'> 인쇄내용 </div>
- 인쇄버튼
<input type='button' value=' 인 쇄 ' onclick="pagePrint(document.getElementById('print_page'))">
