jsPDF setPage配合html方法使用时HTML内容全部渲染到PDF第一页问题

• jsPDF.html() 是异步执行API，使用Promise.all并行触发所有渲染任务时，循环内同步调用的addPage、setPage不会被每个异步渲染任务单独留存上下文，所有渲染任务执行时都会锚定PDF实例的初始活动页，最终所有内容堆叠在第一页。
• 第二种方案的y坐标偏移逻辑存在本质错误：每次调用addPage()新增页面后，新页面的坐标系会独立重置，原点(0,0)对应当前新页的左上角，传入y: i * this.pageHeight只会把内容渲染到第一页下方的非可视区域，根本无法落到后续新增页面上。
• jsPDF实例是有状态的，原生不支持并行执行多个HTML渲染任务，多页渲染必须串行执行，等上一页渲染完成后再操作下一页。

const generatePdf = async () => {
  const pages = document.getElementsByName(this.pageName);
  // 初始化PDF实例，尺寸和单页div尺寸保持一致
  const pdf = new jsPDF("landscape", "px", [this.pageWidth, this.pageHeight]);

  // 用for循环串行处理，不要用forEach并行
  for (let i = 0; i < pages.length; i++) {
    const currentPageEl = pages[i];
    // 第一页默认已创建，从第二页开始先新增空白页
    if (i > 0) {
      pdf.addPage();
    }
    // 等待当前页渲染完成后再进入下一轮循环
    await pdf.html(currentPageEl, {
      x: 0,
      y: 0 // 每页都从当前页左上角开始渲染，不需要全局偏移
    });
  }

  pdf.save("test.pdf");
}

// 调用并捕获异常
generatePdf().catch(error => {
  console.log('PDF生成异常: ', error);
});

• 不要使用forEach+Promise.all的并行写法处理多页HTML渲染，这类并行操作和jsPDF的状态机逻辑完全冲突，必然出现内容重叠、页面错乱问题。
• 不需要手动调用setPage()切换页面，每次执行addPage()后，PDF实例的当前活动页会自动切换到新创建的空白页，直接渲染即可。
• 如果出现内容截断、样式丢失问题，先确认每个页面对应div的固定宽高，和初始化jsPDF时传入的this.pageWidth、this.pageHeight数值完全一致，避免渲染尺寸不匹配。

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