본문 바로가기
FullStack/10. WeB

[JS] HTML 페이지 출력

by nakanara 2020. 11. 10.
반응형

image

[JS] HTML Print 창HTML 페이지 출력

해당 영역의 html을 새로운 창에 표시 후 window.print() 호출
크롬의 경우 Print 창이 뜬 상태에서 바로 닫힘 현상으로 인해 event로 창 닫힘 처리

function Print(elem) {

    var print_win = window.open('', 'PRINT', 'height=400,width=600');

    // Print를 위한 css추가
    print_win.document.write('<html><head><title>' + document.title  + '</title>');
    print_win.document.write('<link href="bootstrap.min.css" rel="stylesheet" type="text/css">');

    print_win.document.write('</head><body >');
    print_win.document.write('<h1>' + document.title  + '</h1>');
    // 출력 대상 Element 
    print_win.document.write(document.getElementById(elem).innerHTML);   
    print_win.document.write('</body></html>');

    print_win.document.close(); // necessary for IE >= 10
    print_win.focus(); // necessary for IE >= 10*/

    // 크롬의 경우 print 선택창이 나타난 후 바로 닫힘현상으로
    // 이벤트 처리    
    print_win.onbeforeprint = function(){
        console.log('before');
    };
    print_win.onafterprint = function(){
        console.log('after');
        print_win.close();
    };

    print_win.print();    

    return true;
}
반응형