使用动态内容从 html 生成 pdf 时添加新页面

Add new page while generating pdf from html with dynamic content

我正在尝试使用 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,但我不知道如何使用它。

请在这里给我一个方法。

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

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

因此,您将必须读取 html 元素的内容并将其动态地逐个添加到该动态对象中的文本字段(在 pdfmake 游乐场上使用它),然后一切都会正常进行。