| Title | html2canvas 라이브러리로 화면 인쇄할 때 가로, 세로 옵션에 따라 확대/축소 적용 Zoom according to landscape, portrait options when screen printing with the html2canvas library | ||||||
| Writer | Ji-Seob Lee | Write Date | May 24 2025 | Modify Date | Jun 1 2025 | View Count | 157 |
When printing a portion of the screen with the html2canvas JavaScript library,
this setting ensures that if you select landscape or portrait orientation in the print options,
the screen will be scaled accordingly.
<img src='" + canvas.toDataURL() + "' width='120%' />
In the img tag that displays the canvas image,
resize it to a percentage of width,
and delete the width item from the style of the body tag.
Adjust the values of width, windowWidth in the option of html2canvas
and the "width" in the above img tag
together to adjust the capture image to fill the screen.
The html2canvas library can be downloaded from 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);
// Write your content in a new window.
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);
});
}
This is the screen for printing in portrait mode.
 This is the screen for printing in landscape mode.
Since the width is in percent, the image fills the screen.
 | |||||||