| 제목 | html2canvas 라이브러리로 화면 인쇄할 때 가로, 세로 옵션에 따라 확대/축소 적용 | ||||||
| 글쓴이 | 이지섭 | 작성일 | 2025-05-24 | 수정일 | 2025-06-01 | 조회수 | 136 |
html2canvas JavaScript 라이브러리로 화면의 일부분을 인쇄할 때
인쇄 옵션에서 가로, 세로 방향을 선택할 경우
그에 맞추어 화면이 확대 축소되도록 하는 설정이다.
<img src='" + canvas.toDataURL() + "' width='120%' />
canvas 이미지를 표시하는 이미지 태그에서 width 의 퍼센트로 크기를 조정하고,
body 태그의 style 에서 width 항목을 삭제한다.
html2canvas 의 옵션인 width, windowWidth 값과
위 부분 img 태그의 width 항목을
함께 조정하여 화면에 캡쳐 이미지가 차도록 조정한다.
html2canvas 라이브러리는 https://html2canvas.hertzen.com/ 에서 다운로드 받을 수 있다.
function printContent() {
var selector = ".grpContents";
var popWindow = null;
html2canvas(document.querySelector(selector), {
allowTaint : true,
useCORS : false,
width: 1700,
windowWidth: 1700,
//height: 3800,
scale: 1,
}).then(canvas => {
var width = 1024;
var height = 768;
popWindow = window.open('about:blank', "print", 'left=100,top=100,height=' + height + ',width=' + width);
// 새 창에 내용을 작성합니다.
popWindow.document.write('<html><head><title>Print</title>' +
'' +
'<style type="text/css">' +
'@media print {' +
' html {' +
' zoom: 100%;' +
' }' +
' body {' +
' width: 100%;' +
' }' +
'}' +
'</style>' +
//"</head><body style='width:1554px; margin:0px; overflow:visible; min-width:fit-content;'>" +
//"<img src='" + canvas.toDataURL() + "' />" +
"</head><body style='margin:0px; overflow:visible; min-width:fit-content;'>" +
"<img src='" + canvas.toDataURL() + "' width='120%' />" +
'</body></html>');
}).then(() => {
popWindow.print();
setTimeout(function() {popWindow.close();}, 200);
});
}
아래는 세로 모드로 프린트 하는 화면이다.
 이번에는 가로 모드로 프린트 하는 화면이다.
width 가 퍼센트이기 때문에 화면에 이미지가 가득찬다.
 | |||||||
로그인 | Language : |