html2pdf.js icon indicating copy to clipboard operation
html2pdf.js copied to clipboard

Blank pages if more then 5 on Safari/iOS/iPhone

Open CrazyOvi opened this issue 4 years ago • 1 comments

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();

CrazyOvi avatar Sep 18 '21 10:09 CrazyOvi

have any update?

CoderMungan avatar Oct 01 '24 10:10 CoderMungan