html2pdf.js produces a blank document on iOS

user_11884946 0
Viewed 1613

I am using eKoopman's html2pdf.js library https://github.com/eKoopmans/html2pdf.js to produce a list of recommendation for a user at the end of an assessment. These are dynamically generate based on the responses.

It works wonderfully on desktop. However when I try to output the PDF on iOS the document is blank except for the headers and footers that I add in a separate function.

Its like it completely ignores the element.

Below is the code I trigger when the user clicks a button.

        var element = $('#recommendationsdisplay').html();
        var opt = {
            margin: [.75,0,.75,0],
            filename: 'Click_Start_' + Math.floor(Date.now() / 10000) + '.pdf',
            enableLinks: true,
            image: {
                type: 'jpeg',
                quality: 1
            },
            html2canvas: {
                scale: 2,
                dpi: 300,
                letterRendering: true
            },
            jsPDF: {
                unit: 'in',
                format: 'letter',
                orientation: 'portrait'
            },
            pagebreak:{
                mode: ['avoid-all', 'css', 'legacy'],
                avoid: 'div.recgrid-item'
            }
        };

        html2pdf().from(element, 'string').set(opt).toPdf().get('pdf').then(function (pdfObject) {
        /* some image related encoding */
            var headerTitle = "Recommendations";
            var footerCR = "© 2020";

            // Header and Footer
            for (var i = 1; i < pdf_pages.length; i++) {
                pdfObject.setPage(i);
                pdfObject.setFontSize(14);
                pdfObject.setTextColor('#0090DA');
                pdfObject.addImage(headerData, 'PNG', 0, 0, 8.5, .5);
                pdfObject.setFontSize(10);
                pdfObject.setTextColor('#777777');
                pdfObject.text(footerCR, 4, 10.5);
                pdfObject.text(' ' + i, 7.375, 10.5);
                pdfObject.addImage(logoData, 'PNG', .75, 10.25, 1, .325);
            }

        }).save();

EDIT: It seems like the issue is with the canvas size limitation. The element is rendered properly in the PDF if its height is NOT above a certain threshold (fewer items chosen in the assessment). My document is only a few pages long (<7)though and I have seen other users report being able to create PDFs with dozens of pages so I am not sure what the issue is.

jspdf javascript ios
2 Answers

pagebreak mode = avoid-all causing the problem. Take away 'avoid-all' .

user_151375300

I have resolved this issue by splitting the whole document into pages and then passing pages one by one to the html2pdf library to generate and bind all pages into a single pdf file.

Example code.

   var opt = {
        margin: [5, 10, 0.25, 10],
        pagebreak: {mode: 'css', after: '.page2el'},
        image: {type: 'jpeg', quality: 1},
        filename: 'testfile.pdf',
        html2canvas: {dpi: 75, scale: 2, letterRendering: true},
        jsPDF: {unit: 'pt', format: 'letter', orientation: 'p'},
    };

    var count = 1;
    let doc = html2pdf().set(opt).from(document.getElementById('page2el')).toPdf();
    jQuery("#cs_pdf").find("div").each(function (e) {

        // Filtering document each page with starting id with page2el 
        if (jQuery(this).attr('id') && jQuery(this).attr('id').indexOf('page2el') != -1) {

              if (count != 1) {
                      doc = doc.get('pdf').then((pdf) => {
                          pdf.addPage();
                          var totalPages = jQuery("#cs_pdf").find(".page2el").length + 1;

                          // Adding footer text and page number for each PDF page
                          for (let i = 1; i <= totalPages; i++) {
                              pdf.setPage(i);
                              pdf.setFontSize(10);
                              pdf.setTextColor(60);
                              if (i !== 1) {
                                  pdf.text('Page ' + i + ' of ' + totalPages, pdf.internal.pageSize.getWidth() - 100, pdf.internal.pageSize.getHeight() - 25);
                              }
                              if (i === 1) {
                                  pdf.text("Confidential", pdf.internal.pageSize.getWidth() - 340, pdf.internal.pageSize.getHeight() - 35);
                              } else {
                                  pdf.text(consultant_company, pdf.internal.pageSize.getWidth() - 530, pdf.internal.pageSize.getHeight() - 25);
                              }
                          }
                      }).from(document.getElementById(jQuery(this).attr('id'))).toContainer().toCanvas().toPdf();
               }
              count++;
        }
     // On Jquery each loop completion executing save function on doc object to compile and download PDF file
    }).promise().done(function () {
        doc.save();
    });
user_138580910
Related