代码之家 › 专栏 › 技术社区 › Nikhil Radadiya

从包含动态内容的html生成pdf时添加新页面

pdfmake html2canvas typescript angular

0

Nikhil Radadiya · 技术社区 · 7 年前

pdfmake

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 但我不知道如何在我的情况下使用它。

请给我推荐一条到这儿的路。

1 回复 | 直到 7 年前

1

Peter Babukh 7 年前

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

我们要做的是用数据创建一个对象,并将其传递给pdfmake。然后内容自动传递到下一页。只有当图像呈现在页脚附近或具有长动态内容时,才会出现图像问题,然后此页面在预览之前对我们有所帮助。又不是你的案子了。