본문 바로가기
개발 이야기/Javascript & jQuery

[JavaScript] 인쇄할 내용을 객체로 만들어서 프린트하기

by 강한페페 2020. 1. 30.
반응형
$(document).ready(function(){
    $("#print_btn").on("click", function(){
        const completeParam = makeHtml(app_idx); //app_idx : DB에서 불러온 인덱스(상황에 따라 변경)
        reportPrint(completeParam);
    });
});

//인쇄할 내용을 객체화시킴
function makeHtml(app_idx){
    const obj = {html : ''};
    let html = '<div class="pagewrap"><div class="print_bg"><img src="image/print_bg.jpg" alt=""></div><div class="page">';
    html += '<span class="num">' + "No." + app_idx + '</span>';
    html += '<h1>인쇄할 내용</h1>';
    html += '</div>';
    obj.html = html;
    return obj;
}

//실제 인쇄창 팝업
function reportPrint(param){
    const setting = "width=850, height=1100";
    const objWin = window.open('', 'print', setting);
    objWin.document.open();
    objWin.document.write('<html><head><title>인쇄할 내용</title>');
    objWin.document.write('<link rel="stylesheet" type="text/css" href="css/print.css"/>');
    objWin.document.write('</head><body>');
    objWin.document.write(param.html);
    objWin.document.write('</body></html>');
    objWin.focus();
    objWin.document.close();

	//브라우저별로 윗 소스가 실행되기 전에 마무리지어버리는 경우가 있으므로 시간여유를 줌
    setTimeout(function(){objWin.print();objWin.close();}, 1000);
}
반응형