jsPDF 内容切断了 vue 组件和 tailwind 的问题

Question

我正在使用 jsPDF 将 HTML 组件转换为 PDF。

下面是代码，

var doc = new jsPDF({orientation: 'l',unit: 'px',format: [1250,1100],compress : true});
        let component=document.getElementById('document');
        doc.html(component,{
        margin: [10, 0, 50, 0],
        callback: function (doc) {
          doc.save("report.pdf");
        },
        x: 0,
        y: 0,
    
        });

生成的PDF看起来像。

只要发现组件的大小大于当前页面的其余部分，我希望 jsPDF 将组件移动到下一页。

Answer 1

我遇到了类似的事情。添加“autoPaging”属性并将其设置为“文本”应该会有所帮助。根据 docs autoPaging 设置为文本将“尽量不要跨分页符将文本切成两半。最适合主要由单列文本组成的文档。”

 doc.html(component,{
    margin: [10, 0, 50, 0],
    callback: function (doc) {
          doc.save("report.pdf");
    },
    x: 0,
    y: 0,
    autoPaging: "text",
    
 });