如何用jsPDF和html2canvas将多个div内容导出至单个PDF文件？

要实现多个div导出到同一PDF，核心思路是批量处理每个目标div，将其转为canvas后依次添加到PDF文档中，同时处理好页面高度计算与分页逻辑。以下是修改后的完整实现：

完整代码 #

function generatePDF() {
  // 定义需要导出的所有div元素（替换成你实际的div）
  const targetDivs = [inputdiv, document.getElementById('div2'), document.getElementById('div3')];
  const doc = new jsPDF("l", "mm", "a4", "true");
  const pdfWidth = doc.internal.pageSize.getWidth();
  let currentY = 19; // 初始Y轴位置，和原代码的左边距保持一致

  // 批量将所有div转为canvas
  Promise.all(
    targetDivs.map(div => {
      return html2canvas(div, {
        width: 2000,
        height: div.offsetHeight, // 用div实际高度代替固定值，适配不同内容
        scale: 2,
        onclone: function(clonedDoc) {
          // 在克隆文档中显示所有目标div，避免原页面隐藏的div导出为空
          targetDivs.forEach(targetDiv => {
            clonedDoc.getElementById(targetDiv.id).style.display = 'block';
          });
        }
      });
    })
  ).then(canvases => {
    // 遍历所有canvas，逐个添加到PDF
    canvases.forEach(canvas => {
      const imgData = canvas.toDataURL('image/jpeg', 1.0);
      const imgProps = doc.getImageProperties(imgData);
      const imgHeight = (imgProps.height * pdfWidth) / imgProps.width;
      const pageHeight = doc.internal.pageSize.getHeight();

      // 检查当前页面剩余空间，不足则新增页面
      if (currentY + imgHeight > pageHeight - 14) { // 14为底部留白，和左边距一致
        doc.addPage();
        currentY = 19; // 新页面重置Y轴起始位置
      }

      // 添加当前div的图片到PDF
      doc.addImage(imgData, 'jpeg', 14, currentY, pdfWidth, imgHeight, undefined, 'FAST');
      currentY += imgHeight + 10; // 每个div内容间添加10mm间距，可按需调整
    });

    // 保存最终PDF文件
    doc.save('MultiDivFile.pdf');
  }).catch(err => {
    console.error('导出PDF失败:', err);
  });
}

关键改动说明 #

• 批量处理逻辑：用Promise.all并行转换所有目标div为canvas，提升处理效率。
• 动态高度适配：将原固定高度1450改为div.offsetHeight，自动适配不同div的内容高度。
• 自动分页：每次添加图片前检查页面剩余空间，内容超出时自动新增页面，避免截断。
• 统一克隆文档样式：在onclone中遍历所有目标div，确保克隆文档内的元素都处于显示状态，防止导出空白。
• 间距控制：通过currentY累加实现div内容间的间距，优化PDF可读性。

注意事项 #

• 确保所有目标div都有唯一id，否则clonedDoc.getElementById无法定位元素。
• 若div包含动态隐藏元素或响应式样式，可在onclone中额外调整样式，保证导出效果与页面一致。
• 可根据需求调整scale参数，平衡导出清晰度与PDF文件大小。

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