Блог

Я использую ekoopman’s html2pdf.js библиотека https://github.com/eKoopmans/html2pdf.js для создания списка рекомендаций для пользователя в конце оценки. Они динамически генерируются на основе ответов.

Он прекрасно работает на рабочем столе. Однако, когда я пытаюсь вывести PDF-файл на iOS, документ остается пустым, за исключением верхних и нижних колонтитулов, которые я добавляю в отдельную функцию.

Похоже, что он полностью игнорирует элемент.

Ниже приведен код, который я запускаю, когда пользователь нажимает кнопку.

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

РЕДАКТИРОВАТЬ: Похоже, проблема связана с ограничением размера холста. Элемент отображается правильно в формате PDF, если его высота НЕ превышает определенного порога (меньшее количество элементов, выбранных при оценке). Мой документ имеет длину всего несколько страниц (<7), хотя я видел, как другие пользователи сообщают о возможности создания PDF-файлов с десятками страниц, поэтому я не уверен, в чем проблема.

pagebreak mode = avoid-all причина проблемы. Уберите ‘избегать всего’ .

Я решил эту проблему, разбив весь документ на страницы, а затем передавая страницы одну за другой в библиотеку html2pdf для создания и привязки всех страниц к одному файлу PDF.

Пример кода.

    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') amp;amp; 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();
    });