JavaScript生成基因宾果表格正常，但下载的PDF文件为空求助

问题原因 #

jsPDF的html()方法是异步操作，需要时间将HTML内容渲染到PDF文档中。原代码中调用doc.html()后立即执行doc.save()，此时渲染还未完成，因此生成的PDF为空。

解决方案 #

将CriaPDF函数改为异步函数，使用await等待html()方法完成渲染后再保存PDF；同时处理循环中多个表格的异步逻辑，避免顺序混乱或遗漏。

修改后的JavaScript代码 #

async function CriaPDF() {
  var tabelaBingo = document.getElementsByClassName("tabelaBingo");

  for (var i = 0; i < tabelaBingo.length; i++) {
    var tabela = tabelaBingo[i];
    var doc = new jsPDF();

    // 等待HTML内容渲染到PDF，完成后保存
    await doc.html(tabela, {
      callback: function(doc) {
        doc.save("bingo" + (i + 1) + ".pdf");
      },
      x: 10, // 设置内容在PDF中的X轴偏移
      y: 10  // 设置内容在PDF中的Y轴偏移
    });
  }
}

关键修改说明 #

1. 异步处理：给CriaPDF添加async关键字，用await等待doc.html()完成渲染，确保PDF内容生成后再执行保存操作。
2. 回调配置：通过doc.html()的配置参数传入callback，在渲染完成后触发保存；同时设置x、y偏移，避免内容超出PDF页面范围。
3. 直接传入DOM元素：无需手动序列化HTML字符串，直接将tabela DOM元素传给doc.html()，jsPDF会自动处理内容和样式，减少出错概率。

额外优化：单PDF多页面 #

如果希望所有表格生成在同一个PDF的不同页面，可使用以下代码：

async function CriaPDF() {
  var tabelaBingo = document.getElementsByClassName("tabelaBingo");
  var doc = new jsPDF();

  for (var i = 0; i < tabelaBingo.length; i++) {
    var tabela = tabelaBingo[i];
    
    await doc.html(tabela, {
      x: 10,
      y: 10
    });

    // 非最后一个表格时添加新页面
    if (i !== tabelaBingo.length - 1) {
      doc.addPage();
    }
  }

  doc.save("todos-bingo.pdf");
}

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