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변수를 추가하여 유동적으로 바꿔도 될것이다.

 

'프로그램 > jQuery' 카테고리의 다른 글

[펌] input type="file" 초기화  (0) 2014.01.13
when() 함수로 동기처리 하기  (0) 2013.09.05
jqGrid  (0) 2012.03.22
jQuery ajax  (0) 2012.03.15
Ajax - jQuery.parseJSON()  (0) 2012.03.14

+ Recent posts

티스토리툴바