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

问题描述

我正在尝试将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 ],};
            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();
});

解决方法

您可以在仍使用jspdf的情况下进行创建，而不是创建一个额外的div，而是使用默认页面和任何不必要的元素（您不希望将其添加到PDF中）添加

data-html2canvas-ignore="true"

每个不必要的元素。

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