multi iframe pageing print (동적 iframe 을 사용한 페이징처리 및 인쇄)

iframe을 특정 수만큼 루프를 돌면서 화면에 표시하고 해당 화면을 있는 그대로 페이징 처리하여 인쇄하는

기능을 만들었다...

나의 경우 선택한 문서만큼 화면에 iframe으로 표현을 하고

한 번에 인쇄하는 기능을 구현할 때 사용하였다.

 

1. html 소스 jstl c:forEach를 사용해 아래와 같이 구현

<div>
     <c:forEach var="p" items="${searchParam.sordCodeArray}" varStatus="status">
				<div style="page-break-after:always;">
			        <iframe class="" style="width : 760px; " id="iframe_${p }" name="iframe_${p }" src=""  frameborder="0" onload="autoResize(this)">
			  		</iframe>
				</div>
	</c:forEach>
</div>

2. javascript & jquery 소스

$(document).ready(function(){
	roadPage();
});
/*각 iframe이 로드되면 리싸이즈를 한다. onload="autoResize(this)"
* 각 iframe 별 로딩된 문서의 높이를 계산하여 리싸이징 해준다.
* 나의 경우 가로는 고정싸이즈로 하고 높이만 리싸이징 하였다.
*/
function autoResize(obj){ 
	var newheight; 
// 	var newwidth; 
	
	if(obj.contentDocument){ 
		newheight = obj.contentDocument.documentElement.scrollHeight+30; 
// 		newwidth = obj.contentDocument.documentElement.scrollWidth+30; 
		} else { 
			newheight=obj.contentWindow.document.body.scrollHeight+30; 
// 			newwidth=obj.contentWindow.document.body.scrollWidth+30; 
			}
	
	obj.height= newheight + "px"; 
// 	obj.width= newwidth + "px"; 
}

function roadPage(){//
	var str = $('#ifm_codeArray').val();// [123, 124] 와 같은 포멧으로 문서 고유 번호를 가져온다
	var repStr = str.replace(/[\[\]]/g,'');
	
	var codeList = repStr.split(',');
	$.each(sordCodeList, function(i, item){
    	//리스트 만큼 돌면서 이미 만즐어진 iframe을 찾아 src속성을 업데이트 해준다.
		$('#iframe_'+item.trim()).attr("src", ctx+'/popup/Template?Code='+item.trim()+'&checkedType=1');
		//calcHeight(item.trim());

	});

};

3. 화면에 로딩된 iframe을 한 번에 인쇄시키기.

		$('#printBtn').click(function (){
 			//window.frames["iframe"].focus();
			//window.frames["iframe"].print();
			
			var pages = [];
			var frames = document.getElementsByTagName('iframe');
			console.log(frames);
			// get all the iframes and loop over them
			// then push their innerHTML into the list
			for (var i = 0; i < frames.length; i++){ 
			   pages.push(frames[i].contentDocument.body.innerHTML); 
			}
			
			if (pages && pages.length) {

			// this if statement, just checks to ensure our list is not empty before running the code.

			// here is the magic, we now set the parent window to be equal to all the concatenated iframes innerHTML
			var pr = window.contentDocument = pages;
			// then we print this new window that contains all the iframes
			window.print();
			} 
			else {
			// do nothing
			}

		});

4. 추가로 iframe 내의 컨탠츠 자체가 A4 사이즈를 넘을 경우 각 인쇄 아웃 풋이 인쇄 기본 설정을 따르며,

  기본 사이즈가 A4 사이즈일 경우 아래와 같이 인쇄 아웃 풋의 여백을 설정하여 컨탠츠가 잘리는 부분을

  조정할 수 있다.(참고: 아래 스타일은 각 페이징 되는 페이지마다 여백이 먹힌다.)

 

<style type="text/css" media="print">
    @page 
    {
        size:  auto;   /* auto is the initial value */
        margin: 10mm 10mm 14mm 10mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

/*     body **이부분은 굳이 설정 않해도 되더라는...대신 @page 부분에 설정 하였다.*/
/*     { */
/*         border: solid 1px blue ; */
/*         margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */ */
/*     } */
</style>