I am attempting to export an HTML element with the class .content into merged PDF pages. I am utilizing the pdfMake library, which can be found at this link: pdfMake
Within the body of the document, there are two elements with the class .content, styled as a4 dimensions..
.content {
padding: 50px 0;
width: 1000px;
height: 842px;
}
I am attempting to export these elements to a PDF file.
UPDATED
function makePdf(){
pages = document.querySelectorAll(".content")
html2canvas(pages, {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500
}]
};
pdfMake.createPdf(docDefinition).download("document.pdf");
}
});
}
However, I have encountered an issue. I am unable to export the .content elements as merged PDF pages. Using html2canvas(pages, { exports 2 merged but empty pages.
When I attempted to troubleshoot by using html2canvas(pages[0], {, it successfully exported one PDF file without any issues. However, the second .content is omitted, as expected.
To address this, I tried implementing a forEach loop as shown below:
function makePdf(){
pages = document.querySelectorAll(".content")
pages.forEach(page => {
html2canvas(page, {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500
}]
};
pdfMake.createPdf(docDefinition).download("table.pdf");
}
});
})
}
Unfortunately, this approach exports individual PDFs for each .content element instead of merging them together.
I am slightly confused. How can I combine the .content elements into merged PDF pages?