使用动态内容从 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

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

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

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

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

Add new page while generating pdf from html with dynamic content

angular

typescript

html2canvas

pdfmake