html2canvas 导出 a4 大小，无论窗口大小如何答案

【问题标题】：html2canvas export a4 size regardless of window sizehtml2canvas 导出 a4 大小，无论窗口大小如何
【发布时间】：2021-07-01 22:23:12
【问题描述】：

我在 Angular 11 项目中使用 jspdf 和 html2canvas。我有一个“仪表板”页面，它需要一个“打印到 pdf”功能。这将拍摄当前仪表板的快照并导出为 pdf 文件。

我遇到的问题是：当窗口在 1920 像素 x 1280 像素的显示器上全屏显示时，它会按预期打印全尺寸的 pdf。但是，如果我将窗口大小调整为更小，则导出的 pdf 在输出页面上显示的图像要小得多。如果窗口被放大，图像也会超出页面范围，也会发生同样的情况。它似乎忽略了我的宽度/高度/windowWidth/windowHeight 选项。

我的印象是我编写的代码应该创建一个具有我设置的尺寸的新画布，然后导出为 pdf。所以窗口大小根本不应该影响它。

我可能做错了什么 - 或需要更改 - 使其始终将 1920x1280 图像导出到 A4 页面，而不管浏览器窗口的大小如何？

captureScreen() {
 var data = document.getElementById('panel'); 
 var canvas = document.createElement('canvas');
 canvas.width = 1920;
 canvas.height = 1280;

 var options = {
   canvas: canvas,
   scale: 1,
   width: 1920,
   height: 1280,
   windowHeight: 1280,
   windowWidth: 1920,
 };
 html2canvas(data, options).then((canvas) => {
   const contentDataURL = canvas.toDataURL('image/png');
   var pdf = new jspdf('l', 'mm', 'a4'); 

   var width = pdf.internal.pageSize.getWidth();
   var height = pdf.internal.pageSize.getHeight();

   pdf.addImage(contentDataURL, 'PNG', 1, 1, width, height);
   pdf.save(this.jobName + ' - Dashboard'); 
 });
 }
}

注意“面板”是源画布，“画布”是我要生成的伪画布

【问题讨论】：

您是否尝试过不将图像/屏幕尺寸设置为静态，而是通过例如 documentElement.clientWidth 来获取？

标签： angular jspdf html2canvas

【解决方案1】：

希望这会有所帮助。我使用了一些我在其他地方找到的代码和一个比例来获得正确的大小，然后使用一些偏移量使它在页面上居中。

function saveAsPDF() {
        html2canvas($('div.panel.panel-default'), {
            onrendered: function (canvas) {
                var wid;
                var hgt;
                var img = canvas.toDataURL("image/png", wid = canvas.width, hgt = canvas
                .height); //image data of canvas
                var hratio = hgt / wid;
                var doc = new jsPDF({
                    orientation: "landscape"
                });
                var width = doc.internal.pageSize.width;
                var height = doc.internal.pageSize.height;
                var height = width * hratio;
                doc.addImage(img, 'JPEG', width*.025, 20, width*.95, height*.95);
                doc.save('AssetComparison.pdf');
            }
        });
    }

【讨论】：