크롬 특정영역(div) 인쇄

특정페이지(A4)를 인쇄할 경우가 있었음.

CSS를 통해 특정 div를 화면에 A4사이즈처럼 보이게 맞추는 것임.

최근 구현할 때는 A4사이즈인 jsp에 데이터를 넣어서 팝업으로 호출하니깐 편했습니다..

크롬일 경우에는 ax5modal를 사용하고 익스는 window.open으로 구현했었습니다..

크롬 미리보기 인쇄처럼 익스도 설정해줘야해서 애먹다가 window.open으로 바꾸니 설정 안넣고 구현됨...

둘다 window.open으로 할껄...쩝쩝...

 

1) A4 CSS

감사합니다.

출처 : jsfiddle.net/mturjak/2wk6Q/1949/

 

 

2) 자바스크립트

let app = document.getElementById('wrap');

const printContents = document.getElementById('barcode').innerHTML;
        let printDiv = document.createElement('DIV');

window.onbeforeprint = function () {

document.body.appendChild(printDiv);

printDiv.innerHTML = printContents;

app.style.display = 'none';

}

window.onafterprint = function () {

app.style.display = 'block';

printDiv.style.display = 'none';

printDiv.innerHTML = '';

document.body.removeChild(printDiv);

}

window.print();

 

 

감사합니다.

출처 : maks.tistory.com/entry/Javascript%EB%A1%9C-%ED%8A%B9%EC%A0%95-%EC%98%81%EC%97%AD-%EC%9D%B8%EC%87%84%ED%95%98%EA%B8%B0-IE11-%ED%8F%AC%ED%95%A8