html2pdf.js
html2pdf.js copied to clipboard
Blank pages if more then 5 on Safari/iOS/iPhone
Dear @eKoopmans , thank you for what you created here. Could you please help me on an issue? I read lots of opened/closed issues for html2pdf.js and I understand that based on canvas dimensions pdf file can encounter problems. Interesting is that it generates the PDF file with headers and footers but blank content, and only on Safari/iPhone - in Chrome, desktop it generates like 28pages, but on iPhone/Safari they have blank body (just header & footer) Based on my code, how could I add pages one by one?
CODE below:
const pdfBody = document.getElementById("forPDF-content");
// html2pdf options
var opt = {
margin: [20, 10, 10, 5], // top, left, bottom, right
filename: fileName,
image: {
type: "jpeg",
quality: 1.0,
},
html2canvas: {
scale: 1,
windowWidth: 1024,
// dpi: 192,
},
jsPDF: {
unit: "mm",
format: "a4",
orientation: "landscape",
},
pagebreak: {
// mode: ["avoid-all", "css", "legacy"],
// before: ".pageInPDF",
// after: ".stepInPDF",,
},
};
// PDF generate & save
var docPDF = html2pdf()
.from(pdfBody)
.set(opt)
.toPdf()
.output()
.get("pdf")
.then((pdf) => {
var totalPages = pdf.internal.getNumberOfPages();
for (var i = 1; i <= totalPages; i++) {
pdf.setPage(i);
pdf.setFontSize(20);
pdf.setTextColor(0);
// HEADAER - LOGO
pdf.addImage(require("../assets/logo.png"), "PNG", 20, 3.5, 20, 10);
// HEADER - TEXT
pdf.text(45, 10.5, "TASK ANALYSIS");
// FOOTER
pdf.setFontSize(10);
pdf.text(10, 205, "PAGE " + i + "/" + totalPages);
}
});
await docPDF
.outputPdf()
.then((pdf) => {
this.sendPDF(btoa(pdf), fileName); // send PDF base64 to backend
})
.save();
have any update?