html2pdf.js在iOS上生成空白文档

q3qa4bjr 于 2023-02-26 发布在 iOS

关注(0)|答案(2)|浏览(451)

我正在使用eKoopman的html2pdf.js库https://github.com/eKoopmans/html2pdf.js在评估结束时为用户生成一个推荐列表，这些是基于响应动态生成的。
它在桌面上运行得非常好。但是，当我试图在iOS上输出PDF时，除了我在单独的函数中添加的页眉和页脚外，文档是空白的。
就像它完全忽略了元素一样。
下面是用户单击按钮时触发的代码。

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，所以我不确定问题出在哪里。

ios

来源：https://stackoverflow.com/questions/63672267/html2pdf-js-produces-a-blank-document-on-ios

2条答案

按热度按时间

djmepvbi1#

pagebreak mode = avoid-all导致问题。取消“全部避免”。

赞(0）回复(0）举报 2023-02-26

mefy6pfw2#

我已经解决了这个问题，方法是将整个文档拆分为页面，然后将页面逐个传递到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') && 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();
    });

赞(0）回复(0）举报 2023-02-26

我来回答

html2pdf.js在iOS上生成空白文档

2条答案

相关问题

热门标签

最新问答