generating a PDF with multiple HTML div elements on separate pages using JS?
rajashripise opened this issue · comments
I am facing the issue to generate the a pdf with multiple HTML div elements on separate pages
only text getting printed but not the content from second div getting blank
i want to allow the autopaging text for pages
const doc = new jsPDF('p', 'mm', 'a4');
const element = document.getElementById('div1');
const element2 = document.getElementById('div2');
doc.html(element, {
callback: function (doc) {
resolve();
},
margin: [8,8,8,8],
html2canvas: {
useCORS: true,
allowTaint: true,
letterRendering: true,
logging: false,
scale: 0.6,
},
x: 3,
y: 3
});
});
doc.addpage();
doc.text("Description = " ,15,20);
doc.html(element2, {
callback: function (doc) {
resolve();
},
margin: [8,8,8,8],
html2canvas: {
useCORS: true,
allowTaint: true,
letterRendering: true,
logging: false,
scale: 0.6,
},
x: 3,
y: 3
});
}); doc.output('dataurlnewwindow');
In my experience, setting autoPaging: false
inside HTMLOptions
would allow you to use doc.addPage()
and set the element content to the next page.
One caveat is that overflowing content on the page will just be cut off instead of starting a new page. That's what autoPaging: 'text'
option is for.
Same issue i am facing
ok found a solution that works for me, and allows me to use autoPaging: text
.
it involves setting the y
position for each element that needs to be on a new page.
can determine the correct y
value by using doc.internal.pageSize.height
in your loop.
const doc = new jsPdf();
for (let i = 0; i < numPages; i++) {
const y = (doc.getNumberOfPages() - 1) * doc.internal.pageSize.height;
const page = document.createElement('div') // append stuff into the div
await doc.html(page, { ...htmlOptions, y });
doc.addPage();
}