如何解决jsPDF中同一文档无法多次调用doc.html()的问题

问题根源 #

• doc.html()是异步方法，和doc.text()、doc.rect()这类同步方法逻辑不同，直接连续调用会导致文档操作顺序混乱，后调用的html()会覆盖前一个的操作或无法正确写入文档。
• 你当前代码中两个html()调用的x、y坐标完全相同，即使能正常执行也会出现内容重叠。

正确实现方式 #

需要将后续的html()调用嵌套在前一个的callback函数中，确保前一个HTML片段渲染完成后再处理下一个；同时调整每个片段的坐标，避免内容重叠。

修正后的代码 #

var pageWidth = 1000,
  lineHeight = 1,
  margin = 20,
  maxLineWidth = pageWidth - margin * 2,
  fontSize = 11,
  ptsPerMM = 72 / 25.6,
  oneLineHeight = (fontSize * lineHeight) / ptsPerMM;

var doc = new jspdf.jsPDF({
  orientation: 'p',
  unit: 'pt',
  format: 'letter',
  lineHeight: lineHeight
});

var field1 = "<b>this is field 1 </b>";
var field2 = "<b>this is field 2 </b>";

// 添加第一个HTML片段
doc.html("<body>" + field1 + "</body>", {
  callback: function (doc) {
    // 第一个渲染完成后，添加第二个HTML片段，调整y坐标避免重叠
    doc.html("<body>" + field2 + "</body>", {
      callback: function (doc) {
        // 所有内容添加完成后再导出PDF
        window.open(doc.output('bloburl'));
      },
      width: maxLineWidth,
      windowWidth: maxLineWidth,
      html2canvas: {
        backgroundColor: 'lightyellow',
        width: maxLineWidth,
        height: 150
      },
      backgroundColor: 'lightblue',
      x: 10,
      y: 180, // 调整y坐标，和第一个内容错开
      autoPaging: 'text'
    });
  },
  width: maxLineWidth,
  windowWidth: maxLineWidth,
  html2canvas: {
    backgroundColor: 'lightyellow',
    width: maxLineWidth,
    height: 150
  },
  backgroundColor: 'lightblue',
  x: 10,
  y: 10,
  autoPaging: 'text'
});

关键说明 #

1. 异步嵌套执行：所有后续的PDF操作（包括第二个html()调用和最终的导出）必须放在前一个html()的callback中，确保每个异步操作完成后再执行下一个。
2. 坐标调整：第二个HTML片段的y坐标设置为180（比第一个的10加上内容高度150再加一点间距），避免内容重叠。
3. 最终导出时机：必须在最后一个html()的callback中执行doc.output()，确保所有内容都已渲染到PDF中。

如果需要添加更多HTML片段，只需继续在最后一个callback中嵌套下一个doc.html()调用，同时依次调整坐标或利用doc.getNumberOfPages()、doc.setPage()控制页面位置即可。

内容的提问来源于stack exchange，提问作者Baker Al-Nakib