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。然后内容自动传递到下一页。当图像靠近页脚或具有长动态内容呈现时，问题只出现在图像上，然后这个页面可以帮助我们。不是你的情况了。

因此，您必须阅读html元素的内容并将其逐个动态地添加到该动态对象中的文本字段（在pdfmake playground上播放），然后一切都会正常工作。

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

1 个答案: