html2pdf.js生成PDF空白页面问题解决办法

现象

1、Scale参数1.8时,安卓手机在20页以上可能爆掉生成空白页

2、Scale参数1.8时,苹果手机在5页以上可能爆掉生成空白页

原因是浏览器支持画布的尺寸大小限制

解决办法

分页生成,一个元素一页这样不可能超过限制尺寸。

查到解决代码(希望能帮助到大家)如下:

  //参数根据需要调整
  var opt = {
    margin: 0,
    filename: name,
    image: { type: "jpeg", quality: 0.98 }, //0.98
    html2canvas: { scale: 1.8, useCORS: true },
    jsPDF: { unit: "pt", format: "a4" }, 
    pagebreak: { mode: ["css", "legacy"] },
  };

//需要处理的页面的元素数组,每一页一个element
    let elements =[] 
    let worker = html2pdf().set(opt).from(elements[0]);

    if (elements.length > 1) {
      worker = worker.toPdf();
      elements.slice(1).forEach(async (element) => {
        worker = worker
          .get("pdf")
          .then((pdf) => {
            pdf.addPage();
          })
          .from(element)
          .toContainer()
          .toCanvas()
          .toPdf();
      });
    }

    worker.save()

要使用 html2canvas 和 jspdfHTML 转换为 PDF,可以按照以下步骤进行操作: 1. 首先,需要在 HTML 页面中引入 html2canvas 和 jspdf 的库文件。可以使用以下代码在 HTML 页面中引入这两个库文件: ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> ``` 2.HTML 页面中添加一个按钮,并在点击按钮时触发将 HTML 转换为 PDF 的函数,可以使用以下代码: ```html <button onclick="generatePDF()">生成PDF</button> ``` 3.JavaScript 文件中编写将 HTML 转换为 PDF 的函数,可以使用以下代码: ```javascript function generatePDF() { // 将 HTML 转换为 canvas html2canvas(document.body).then(function(canvas) { // 创建一个新的 PDF 对象 var pdf = new jsPDF('p', 'pt', 'a4'); // 获取 canvas 的宽度和高度 var canvasWidth = canvas.width; var canvasHeight = canvas.height; // 计算一页 PDF 的高度 var pageHeight = canvasWidth / 592.28 * 841.89; var position = 0; // 将 canvas 拆分为多页,并将每页添加到 PDF 中 while (position < canvasHeight) { pdf.addImage(canvas, 'JPEG', 0, position, 592.28, pageHeight); position += pageHeight; if (position < canvasHeight) { pdf.addPage(); } } // 将 PDF 文件保存到本地 pdf.save('myPDF.pdf'); }); } ``` 在上面的代码中,首先使用 html2canvas 将 HTML 页面转换为 canvas,然后计算每一页 PDF 的高度,将 canvas 拆分为多页,并将每页添加到新创建的 PDF 对象中。最后,使用 pdf.save() 方法将 PDF 文件保存到本地。 需要注意的是,如果 HTML 页面中有 CSS 样式,可能会导致生成PDF 文件中出现空白页。可以尝试将 CSS 样式转换为内联样式,或者在 CSS 中添加 !important 关键字来解决这个问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值