在从 html 生成具有动态内容的 pdf 时添加新页面

Question

我正在尝试使用 pdfmake 从带有动态内容的 html 生成 pdf。它运行良好，但有一个问题。

Html 内容太大，pdf 只生成一页，html 的其余内容被剪切。如果内容超过一页，如何将其他页面添加到 pdf。

这是我的代码。

createPdf(): void {
     var main = $('.main');
    html2canvas(this.el.nativeElement, {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();                       
                var a4  =[ 595.28,  841.89];
                var docDefinition = {
                    pageSize: 'A4',
                    content: [{
                        image: data,
                        width: 500,
                        pageBreak:'after'
                    }],
                     pageBreakBefore: function(currentNode, followingNodesOnPage,
                      nodesOnNextPage, previousNodesOnPage) {                      
                       return currentNode.headlineLevel === 1 && followingNodesOnPage.length === 0;
                    }
                };
                pdfMake.createPdf(docDefinition).download("test.pdf");
            },
            imageTimeout:2000,
            removeContainer:true
        },
        );
    }

有人建议使用pageBreakBefore，但我不知道如何在我的情况下使用它。

请在这里给我建议。

Answer 1

似乎您从画布创建图像并将此图像添加到 pdf 文档。当然，这张图片不会被分成几个部分/页面。而这个巨大的图像被切掉了。要使其适合页面，您唯一可以做的就是将图像大小设置为页面大小，但您将获得不可读的内容。这不是你需要的。并且 pagebreakBefore 不会帮助你。因为您不能将一张图像分成几个部分。

我们所做的是用数据创建一个对象并将其传递给 pdfmake。然后内容自动传递到下一页。仅当图像接近页脚或具有长动态内容时，图像才会出现问题，然后此 pageBrealBefore 帮助我们。又不是你的情况。

因此，您将必须读取 html 元素的内容并将其动态地一一添加到该动态对象的文本字段中（在 pdfmake 操场上使用它），然后一切都会正常工作。