html2pdf.js produces a blank document on iOS

I’m using html2pdf.js library to produce a dynamically generated report.

It works well on desktop but when I try to output the PDF on iOS the document is blank except for the headers and footers that I added separately.

Below is the code.

`var opt = { margin: [15, 6, 12, 6], filename: ‘${options.FileName}’, image: { type: ‘jpeg’, quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: ‘mm’, format: ‘a4’, orientation: ‘portrait’ }, pagebreak: { mode: [‘avoid-all’, [‘p’,‘li’,‘h1’,‘h3’], ‘legacy’] } };

var parentPDF = function(){ var textElem = document.getElementById(‘printFooter’); textElem.style.display = “none”;

var worker = html2pdf().set(opt).from(document.body).toContainer().toCanvas().toImg().toPdf().then(function () {
    var pdfObject = worker.prop.pdf;
    var number_of_pages = pdfObject.internal.getNumberOfPages();
    var pdf_pages = pdfObject.internal.pages;
    var myFooter = "";

    for (var i = 1; i < pdf_pages.length; i += 1) {
        pdfObject.setPage(i);
        pdfObject.setFontSize(8);
        myFooter = "Page " + i.toString() + "/" + (pdf_pages.length-1);
        pdfObject.text(myFooter, 180, 289);
        var textElem = document.getElementById('printFooter');

        if(textElem){
            var text = textElem.textContent;//TODO: get text from HTML
            pdfObject.setFontSize(7);
            pdfObject.text(text, pdfObject.internal.pageSize.getWidth() - 190, 289);
        }
    }

    pdfObject.output('blob');
    window.parent.PDF_CALLBACK(pdfObject.output('blob'));
});

};`

Issue Analytics

State:
Created 3 years ago
Comments:14

Top GitHub Comments

1reaction

CrazyOvicommented, Apr 28, 2022

Do you have a solution for this? I have the same problem

I will put below the way I did it. Still, I had to ask the user not to create a PDF with more then 10 pages and to pray he/she won’t 😃

  // options for generated pdf
  var opt = {
    margin: [20, 5, 12.5, 5], // top, left, bottom, right - adauga cate 5 la fiecare daca e nevoie
    filename: fileName,
    image: {
      type: "jpeg", // jpg, jpeg, bmp, png
      quality: 1.0,
    },
    html2canvas: {
      scale: 1.5,
      dpi: 192,
      letterRendering: true,
      windowWidth: "280mm",
      windowHeight: "260mm",
      allowTaint: true,
    },
    jsPDF: {
      unit: "mm",
      // format: "a4",
      format: [260, 280],
      orientation: "landscape", // landscape sau portrait
      compress: true,
    },
    pagebreak: {
      mode: "css",
      // mode: ["avoid-all", "css", "legacy"],
      before: ".break-before",
      after: ".break-after",
      avoid: ".break-avoid",
    },
  };

  // generating the PDF
  var docPDF = html2pdf()
    .from(pdfBody)
    .set(opt)
    .outputPdf()
    .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);

        // add HEADAER - LOGO
        pdf.addImage(require("../assets/logo.png"), "PNG", 20, 3.5, 20, 10);

        // add HEADER - TEXT
        pdf.text(45, 10.5, "HEADER TEXT");

        // add FOOTER
        pdf.setFontSize(10);
        pdf.text(
          pdf.internal.pageSize.getWidth() * 0.88,
          pdf.internal.pageSize.getHeight() - 3.5,
          "PAGE " + i + "/" + totalPages
        );
      }
    });

// save PDF
await docPDF.outputPdf().then((pdf) => {
    // send PDF info to function (my function sends the info to may backend api
    this.sendPDF(btoa(pdf), fileName);
    // console.log(fileName, pdf);
  }).save(); // save/download the pdf

I hope this will help you. P.S: play with the options to fit your needs.

1reaction

rajeshn95commented, Aug 6, 2021

@syrykh-anastasiia what is your pagebreak mode? if you are using avoid-all in pagebreak: { mode: ['avoid-all'] }, remove avoid-all and check.

Top Results From Across the Web

html2pdf.js produces a blank document on iOS - Stack Overflow

I have resolved this issue by splitting the whole document into pages and then passing pages one by one to the html2pdf library...

[Solved]-html2pdf.js produces a blank document on iOS

I have resolved this issue by splitting the whole document into pages and then passing pages one by one to the html2pdf library...

html2pdf.js | Client-side HTML-to-PDF rendering using pure JS.

html2pdf.js converts any webpage or element into a printable PDF entirely ... To capture a default PDF of the entire page, use html2pdf(document.body)...

All pdf's imported are blank on the Ipad - Apple Community

However, no matter what I try, the Ipad displays them as blank pages. ... I put the new PDF/A document on my iPad...

[Reactive Print PDF Button] Does not work in IOS, Safari or ...

This component is very perfect. But I have one issue, I think it is not compatible with a mobile browser. When the print...