使用jsPDF导出HTML表格为PDF时遇‘jsPDF未定义’错误的求助

错误原因 #

你引入的是jsPDF的UMD模块化版本（jspdf.umd.min.js），这个版本不会将jsPDF直接暴露为全局变量，而是通过模块规范导出，所以直接执行new jsPDF()会触发ReferenceError。

解决方法 #

有两种可行的修复方案：

方案1：改用全局版本的jsPDF CDN #

替换你当前的script引入标签为非UMD的全局版本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.min.js"></script>

这个版本会自动将jsPDF挂载到window全局对象上，你的原有JavaScript代码无需修改即可正常运行。

方案2：从UMD模块中解构获取jsPDF #

如果必须使用UMD版本，在创建jsPDF实例前，先从全局的jspdf对象中解构出jsPDF：

const exportPdfBtn = document.getElementById("export-pdf-btn");
exportPdfBtn.addEventListener("click", () => {
  // 从全局jspdf对象中解构jsPDF构造函数
  const { jsPDF } = window.jspdf;
  const doc = new jsPDF();
  const table = document.getElementById("streets-table");

  html2canvas(table).then((canvas) => {
    const imgData = canvas.toDataURL("image/png");
    doc.addImage(imgData, "PNG", 10, 10, 180, 0);
    doc.save("table.pdf");
  });
});

额外注意事项 #

确保你已经正确引入了html2canvas库，否则会出现新的ReferenceError: html2canvas is not defined错误，可以添加以下script标签引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

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