使用jsPDF生成PDF时遭遇'Uncaught ReferenceError'错误求助

以下是几个排查和解决的关键点：

• 确保库加载顺序正确
  你的自定义JavaScript代码必须放在jsPDF库引用之后。浏览器按顺序加载脚本，若你的代码先执行，此时jsPDF还未加载完成，就会触发未定义错误。示例结构：

  <!-- 先加载jsPDF库 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.min.js"></script>
  <!-- 再写你的自定义脚本 -->
  <script>
    function generatePDF() {
      const doc = new jsPDF();
      doc.text('测试内容', 10, 10);
      doc.save('test.pdf');
    }
  </script>
  

• 检查库引用的有效性与版本适配

  • 若使用CDN链接，要确认链接指向稳定可用的版本。部分新版本jsPDF采用UMD模块化导出，直接用new jsPDF()会报错，此时需改用new window.jspdf.jsPDF()。比如UMD版本的引用：

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

    对应的调用代码：

    const doc = new window.jspdf.jsPDF();
    

  • 若本地引入库文件，要核对文件路径是否正确，确保文件存在于指定位置，没有拼写错误。

• 验证库是否成功加载
  打开Edge开发者工具的Console面板，输入jsPDF（或对应版本的window.jspdf.jsPDF），如果能输出函数构造体，说明库加载成功；如果仍显示undefined，说明库未被正确加载，需重新检查引用链接或本地文件。

• 确保脚本执行时机正确
  避免在DOM未完全加载时绑定事件或执行代码，可以将自定义逻辑包裹在DOMContentLoaded事件中，确保所有资源加载完成后再执行：

  document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#pdfBtn').addEventListener('click', generatePDF);
  });
  

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