使用jsPDF导出Div为PDF时文本被截断而非分页（Firefox/IE）

我之前也碰到过一模一样的问题——jsPDF在Chrome里多页导出正常，到了Firefox和IE就只生成空页面，核心原因是不同浏览器对DOM元素的尺寸计算、渲染时机的处理有差异，导致jsPDF自动分页时无法正确识别后续内容的位置。下面是我验证过的可行解决方案：

一、先排查现有实现的问题 #

如果你的代码是直接调用doc.html(divElement, { callback: ... })这类自动分页的方式，在Firefox/IE里很容易踩坑，因为这个方法的浏览器兼容性不够稳定，尤其是处理长内容时，旧浏览器的DOM测量逻辑和Chrome不一致，导致分页位置计算错误。

二、改用html2canvas + jsPDF的组合方案 #

通过html2canvas先把目标div转换成Canvas，再手动分割Canvas为多页添加到PDF里，这种方式绕开了浏览器对DOM解析的差异，兼容性更强。

具体代码示例 #

// 确保已引入html2canvas和jsPDF库
function exportDivToPDF() {
  const targetDiv = document.getElementById('your-target-div-id');
  
  html2canvas(targetDiv, {
    scale: 2, // 提高导出清晰度，避免模糊
    useCORS: true, // 处理div内的跨域图片（如果有）
    logging: false // 关闭日志，减少干扰
  }).then(canvas => {
    const pdf = new jsPDF('p', 'mm', 'a4');
    const pageWidth = pdf.internal.pageSize.getWidth();
    const pageHeight = pdf.internal.pageSize.getHeight();
    const canvasWidth = canvas.width;
    const canvasHeight = canvas.height;
    
    // 计算需要拆分的总页数
    const pageRatio = canvasWidth / pageWidth;
    const totalPages = Math.ceil(canvasHeight / (pageHeight * pageRatio));
    
    let currentYOffset = 0;
    for (let pageIndex = 0; pageIndex < totalPages; pageIndex++) {
      // 创建临时Canvas截取当前页内容
      const tempCanvas = document.createElement('canvas');
      const tempCtx = tempCanvas.getContext('2d');
      tempCanvas.width = canvasWidth;
      tempCanvas.height = pageHeight * pageRatio;
      
      // 从原Canvas截取对应区域的内容
      tempCtx.drawImage(
        canvas,
        0, currentYOffset,
        canvasWidth, tempCanvas.height,
        0, 0,
        canvasWidth, tempCanvas.height
      );
      
      // 将临时Canvas转为图片添加到PDF
      const imgData = tempCanvas.toDataURL('image/png');
      pdf.addImage(imgData, 'PNG', 0, 0, pageWidth, pageHeight);
      
      // 非最后一页则添加新页
      if (pageIndex < totalPages - 1) {
        pdf.addPage();
      }
      
      // 更新偏移量，处理下一页
      currentYOffset += tempCanvas.height;
    }
    
    // 导出PDF文件
    pdf.save('div-content.pdf');
  });
}

三、针对Firefox/IE的额外优化 #

• Firefox：避免把scale参数设置过高（比如超过3），否则可能触发渲染超时；同时检查div内是否有浮动元素或动态隐藏的内容，这类元素可能导致html2canvas计算高度错误。
• IE：确保使用的html2canvas版本是兼容IE的（推荐1.0.0-rc.4及以上版本）；如果导出仍有问题，可以在调用方法前加个setTimeout延迟执行，确保DOM完全渲染完成。

四、验证小技巧 #

测试时可以在控制台打印canvasHeight、totalPages这些参数，确认分页逻辑的计算是否正确；如果Firefox里出现Canvas渲染失败的报错，检查div内是否有不支持的CSS属性（比如某些复杂的渐变或滤镜）。

内容的提问来源于stack exchange，提问作者Marvin T