jsPDF导出PDF报cannot load html2canvas、PDF空白如何解决

cannot load html2canvas报错和空白PDF问题，核心从四个方向排查：

• 依赖缺失：jsPDF的html()方法本身不具备DOM渲染能力，底层依赖html2canvas库将DOM节点转为画布再写入PDF，当前代码仅引入了jQuery、xlsx、jsPDF三类资源，未加载html2canvas，导致渲染流程直接中断，PDF无内容。
• DOM结构非法：现有代码存在嵌套<head>、嵌套<body>、标签未闭合的问题，异常的DOM树会导致html2canvas渲染失败，即使补全依赖也可能出现空白。
• 异步逻辑错误：pdf.html()是异步执行方法，当前代码在调用该方法后立刻同步执行PDF输出、iframe挂载操作，此时DOM转PDF的流程还未完成，取到的是未写入内容的空PDF实例，同时回调内的保存逻辑和提前输出的逻辑存在冲突。
• 业务逻辑bug：当前净重转换逻辑错误，netWeightKG计算误用了毛重grossWeight字段做系数乘法，会导致净重数值和毛重完全一致。

单页生成修复 #

1. 补全依赖：在现有jsPDF引入语句后，引入兼容版本的html2canvas库文件，保证库在PDF生成逻辑执行前加载完成。
2. 修正HTML结构：删除重复嵌套的<head>、<body>标签，补全未闭合的容器标签，保证DOM树结构合法。
3. 修正异步执行逻辑：所有依赖PDF生成结果的操作，全部放到html()方法的回调函数内执行，移除提前触发的输出逻辑，修复后的生成函数参考如下：

generate = function() {
  const pdf = new jsPDF('p', 'pt', 'a4');
  pdf.setFontSize(18);
  pdf.html(document.getElementById('html-2-pdfwrapper'), {
    x: margins.left,
    y: margins.top,
    width: margins.width,
    callback: function(pdf) {
      // 所有后续操作放到回调内执行
      pdf.save('NetWeight.pdf');
      const iframe = document.createElement('iframe');
      iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:650px; padding:20px;');
      document.body.appendChild(iframe);
      iframe.src = pdf.output('datauristring');
    }
  });
}

4. 修正数值转换逻辑：净重的KG值计算改为取netWeight字段做系数换算，不要复用毛重字段。

多页导出实现 #

单页功能调试通过后，按以下逻辑实现多页导出即可：

• 提前把单页标签的DOM结构存为模板变量，不要复用页面上固定的单个节点，避免多数据渲染时覆盖内容。
• 循环解析后的Excel行数据，每遍历一行就把对应净重、毛重、详情字段填充到模板节点中。
• 每填充完一页内容，就用html2canvas将当前模板节点转为画布，按A4纸尺寸计算缩放比例后转为图片格式。
• 第一页直接调用pdf.addImage()写入图片，后续每一页先调用pdf.addPage()新建空白页，再写入对应页的图片。
• 所有行数据遍历完成、所有页面都写入PDF实例后，统一调用pdf.save()导出文件。
• 如果要使用CSS控制分页，可以给每页内容外层包裹带page-break类的容器，html2canvas会自动识别分页样式拆分内容，无需手动逐页添加。
• 现有chumpage函数仅操作DOM类列表的第0个元素，多页场景下需要改为动态创建对应数量的DOM节点，不要固定取索引0的元素赋值，否则只会渲染最后一行Excel数据。

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