从具有动态内容的html生成pdf时添加新页面 [英] Add new page while generating pdf from html with dynamic content

问题描述

我正在尝试使用pdfmake从具有动态内容的html生成pdf.工作正常，但有问题.

I'm trying to generate pdf from html with dynamic content using pdfmake. its working good but having an issue.

HTML内容很大，而pdf仅生成一页，而html的其余内容被剪切.如果内容超过一页，如何将其他页面添加到pdf中.

Html content is to large and pdf only generating one page and rest of the content from html is cut. How can I add other page to pdf if content is more than one page.

这是我的代码.

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，但我不知道该如何使用.

there was some suggestion to use pageBreakBefore but I don't know how to use it in my case.

请给我建议一种方法.

推荐答案

似乎是从画布创建图像并将该图像添加到pdf文档中.当然，该图像不会分成几部分/几页.而这个巨大的形象被裁剪了.使页面适合页面的唯一操作是将图像尺寸设置为页面尺寸，但是您将获得不可读的内容.这不是您所需要的.和pagebreakBefore不会帮助您.因为您无法将一张图像分成几部分.

Seems like you create an image from canvas and add this image to pdf document. Surely this image will not be broken into several parts / pages. And this huge image is cut. The only thing you can do to make it fit the page is to set the image size the page size, but you will get unreadable content. It is not what you need. And pagebreakBefore will not help you. As you cannot break one image into several parts.

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

What we do is creating an object with data and pass it to pdfmake. Then the content is passed to the next page automatically. Issues arise only with images when an image is rendered close to the footer or with long dynamic content and then this pageBrealBefore helps us. Not your case again.

因此，您将必须阅读html元素的内容，并将其动态地逐个动态添加到该动态对象的文本字段中(在pdfmake操场上使用它)，然后一切正常.

So, you will have to read content of html elements and dynamically add it one by one to text field in that dynamic object (play with it on the pdfmake playground) and then everything will work fine.

这篇关于从具有动态内容的html生成pdf时添加新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！