I am working on generating a PDF from HTML with dynamic content using the pdfmake library. Everything is functioning well, but I have encountered an issue.
The HTML content is too large, and the generated PDF only displays one page, cutting off the remaining content. How can I add additional pages to the PDF if the content exceeds one page?
Below is the code snippet I am currently using:
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
},
);
}
I received a suggestion to utilize the pageBreakBefore property, but I am unsure how to implement it in my situation.
If you have any solutions or advice regarding this matter, please feel free to share them with me.