[펌] jQuery를 이용한 영역별 인쇄화면 띄우기

jQuery를 이용한 영역별 인쇄화면 띄우기

너무 유용한 스크립트가 있어 공유합니다.

 

 

자료 :jquery.printElement.js

 

출처 : Crazy In This World

========================================== 원본 ==========================================

Jquery를 이용해서 팝업 페이지를 따로 만들지 않고도 해당 영역을 팝업을 띄워서 인쇄 화면을 만들 수 있다. 또한, 팝업을 유동적으로 만들려고 한다면 각각의 width, Height 인자값을 밖에서 제어할 수 있도록 Js Framework를 수정하셔도 된다.

다음은 Js Framework를 수정하지 않은 채 팝업을 띄워서 인쇄하는 소스이다.
1. 첨부하는 Jquery.printElement.js를 다운받는다. 

jquery.printElement.js

 

2, 소스에 다음과 같이 적용한다. 설명은 주석으로 소스옆에 명시되어 있음.

01.$(document).ready(function() {

02.   $("#printButton").click(function() { //이벤트 발생시킬 버튼 아이디

03.       printElem({

04.  printMode: 'popup', //팝업설정 printMode option = popup, iframe,

05.  overrideElementCSS:[ 'css경로', { href:'css경로',media:'print' } ], //overrideElement option : boolean, css경로

06.  pageTitle:'AIPS Seoul 2011', //팝업 타이틀

07.  leaveOpen:true //인쇄하고도 창을 띄우기(true)/안띄우기(false). Default는 false

08.     });

09.      });

10.  });

11.  function printElem(options){   

12.     $('#Content').printElement(options); //팝업으로 띄울 영역 Div 아이디

13.  }

3. 팝업창을 유동적으로 바꾸려면 Jquery.printElement.js안에 소스는 이부분을 보고 인자값을 추가해서 넣으면 된다.

 

 

1.if(i.printMode.toLowerCase()=="popup"){

2.   f=g.open(

3.      "about:blank",

4.      "printElementWindow",

5.      "width=650,height=440,scrollbars=yes"

6.    );

7.    e=f.document;

8.}

이 부분에 width와 height변수를 추가하여 유동적으로 바꿔도 될것이다.