아래는 구현된 화면이다.
이 화면을 출력하고자 다음처럼 코드를 구현했다.
function makeHtml(){
const obj = {html : ''};
let html =document.getElementById('tbl1').innerHTML;
obj.html = html;
return obj;
}
function reportPrint(param){
const setting = "width=900, height=850";
const objWin = window.open('', 'print', setting);
objWin.document.open();
objWin.document.write('<!DOCTYPE html>');
objWin.document.write('<head>');
objWin.document.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">');
objWin.document.write('<title>iframe</title>');
objWin.document.write('<link rel="stylesheet" href="<spring:eval expression="@environment.getProperty('web.jsp.cssPath')"/>/test.css"/>');
objWin.document.write('</head>');
objWin.document.write('<body id="contents_body" class="print">');
objWin.document.write('<div id="test_wrap">');
objWin.document.write('<div id="cont" class="test_wrap">');
objWin.document.write('<div></div>');
objWin.document.write('<div class="test_print_tab" style="margin-left: 30px; margin-right: 30px;>');
objWin.document.write(param.html);
objWin.document.write('</div></div></div></div></body></html>');
objWin.focus();
objWin.document.close();
objWin.print();
objWin.close();
}
function printClick() {
const completeParam = makeHtml();
reportPrint(completeParam);
};
하지만 이렇게 구현된 출력 기능은 간혹 css가 먹지 않아 다음과 같은 문제가 발생했다.
출력 Window가 로딩될 때 css가 작동하지 않은 상태로 html이 그려진 것이므로 css의 문제임은 분명해보였다. reportPrint(Param) 내부에서 objWin.print(); objWin.close();에 약간의 트릭을 주는 것으로 문제를 해결할 수 있었다.
setTimeout(function() {
objWin.print();
objWin.close();
}, 100);
위와 같이 print()와 close()에 타이머를 걸어줌으로써 css가 동작할 수 있도록 찰나(?)의 시간을 기다려주었고 다음과 같이 출력 Window가 잘 그려지게 되었다.
크롬에서 빈번히 발생하는 문제같고 stackoverflow에도 해당 문제를 겪는 사람이 꽤나 있었다.
댓글 없음:
댓글 쓰기