Add new page while generating pdf from html with dynamic content

问题

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

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.

Here is my code.

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
        },
        );
    }

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

Please suggest me a way here.

回答1:

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.

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.

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.

来源：https://stackoverflow.com/questions/45096504/add-new-page-while-generating-pdf-from-html-with-dynamic-content