pdfMake / html2canvas 对于 PDF 输出来说太大了，如何调整大小？答案

【问题标题】：pdfMake / html2canvas is way too big for PDF output, how to resize?pdfMake / html2canvas 对于 PDF 输出来说太大了，如何调整大小？
【发布时间】：2020-09-29 21:37:33
【问题描述】：

我正在尝试将我的 HTML 页面的一部分转换为 PDF 文件。我不想要整个页面，因为它包含不必要的按钮等。

所以我创建了一个高度为 0 的 div，并将我需要打印的内容添加到底层 div 中，然后删除元素并打印。我所有的代码都在下面。它工作得很好，但是 pdf 太放大了，我无法修复它。我在下面附上了我的代码和生成的 pdf 输出。我尝试了很多不同的设置。有人有提示吗？

<div style="overflow: hidden; height: 0;">
  <div id="mainClone"></div>
</div>


function printPDF()
{


html2canvas($('#mainClone'), {
        onrendered: function (canvas) {
            var data = canvas.toDataURL();
            var docDefinition = {
                pageSize: {
                    width: 1000,
                    height: 'auto'
                },
                content: [{
                    image: data,
                    //width: width,
                    //height: height,
                }],
                pageSize: 'letter',
                pageOrientation: 'landscape',
                pageMargins: [ 5, 5, 5, 5 ],
            };
            pdfMake.createPdf(docDefinition).download("test.pdf");
        }
    });

}

$('#PrintPDF').click(function () {
    $('#mainClone').html($('#main').html());
    $('#mainClone').find(".calendar-prev").hide();
    //remove more html elemnent we don't need

    printPDF();
});

【问题讨论】：

标签： javascript jquery html2canvas pdfmake

【解决方案1】：

您可以在仍然使用 jspdf 的同时制作它，而不是创建额外的 div，而是使用默认页面和任何不必要的元素（您不希望在 PDF 中添加）添加此

data-html2canvas-ignore="true"

到每个不必要的元素。

这将忽略该元素并且不会放入您生成的 PDF 中。

【讨论】：