체크개발자's Blog

Div 영역 브라우저에서 인쇄하기 본문

개발 Tip

Div 영역 브라우저에서 인쇄하기

체크개발자 2019. 5. 28. 10:58

[JavaScript] Div 부분 영역 인쇄하기

 

출처 : 잉여한개발자의 Note

http://ingcj.egloos.com/3607672

 

[JavaScript] Div 부분 영역 인쇄하기

고객이 인쇄 기능 요청시 사용하는 인쇄 전용 스크립트. JQuery로 지원하는 인쇄 플러그인이 많은데 ASP.NET과 JQuery 버전이 바뀜에 따라 안되는게 많아서 열심히 검색하여 직접 작성.  function print(printArea) { win = window.open();  self.focus();  wi

ingcj.egloos.com

고객이 인쇄 기능 요청시 사용하는 인쇄 전용 스크립트.

 

JQuery로 지원하는 인쇄 플러그인이 많은데 ASP.NET과 JQuery 버전이 바뀜에 따라

안되는게 많아서 열심히 검색하여 직접 작성.

 

 function print(printArea)

{

win = window.open(); 

self.focus(); 

win.document.open();

 

/*

1. div 안의 모든 태그들을 innerHTML을 사용하여 매개변수로 받는다.

2. window.open() 을 사용하여 새 팝업창을 띄운다.

3. 열린 새 팝업창에 기본 <html><head><body>를 추가한다.

4. <body> 안에 매개변수로 받은 printArea를 추가한다.

5. window.print() 로 인쇄

6. 인쇄 확인이 되면 팝업창은 자동으로 window.close()를 호출하여 닫힘

*/

win.document.write('<html><head><title></title><style>');

win.document.write('body, td {font-falmily: Verdana; font-size: 10pt;}');

win.document.write('</style></head><body>');

win.document.write(printArea);

win.document.write('</body></html>');

win.document.close();

win.print();

win.close();

}

 

<!-- 버튼 이벤트 -->

<input type = "button" OnClick="print(document.getElementById('printArea').innerHTML)" />

 

<!-- div 영역 -->

<div id = "printArea">

<!-- 프린트 할 영역 -->

</div>

'개발 Tip' 카테고리의 다른 글

소스 비교 프로그램(FREE)  (0) 2020.11.30
버전관리 프로그램 subversion  (0) 2020.06.21
우리가 몰랐던 db tool 디비툴  (0) 2017.12.09
[XSS] FILTER 적용(structs)  (0) 2017.08.29
[Redmine] 위지윅 에디터 ckeditor  (0) 2017.07.30
Comments