无需包管理器如何使用jsPDF？旧项目报错求助
2026-5-9
解决jsPDF未定义错误：传统非Node.js项目的引入方案
嘿，这个问题我之前维护老项目时也碰到过！你遇到的Uncaught ReferenceError: jsPDF is not defined错误，本质是浏览器还没加载到jsPDF的代码，就先执行了你的自定义脚本。在不使用Node.js的旧项目里，直接通过CDN引入jsPDF脚本就能搞定，具体操作分两步：
1. 在HTML中引入jsPDF的CDN脚本
把下面的代码放到你的HTML文件里，推荐放在<body>标签的末尾（或者<head>里），一定要放在你的自定义JS代码之前：
<!-- 引入jsPDF核心库（这里用的是2.5.1版本的UMD格式，兼容性好） --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> <!-- 如果你需要更完整的HTML转PDF支持，还可以引入html2canvas（可选，根据需求添加） --> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
2. 调整你的JS代码适配CDN版本
如果你引入的是UMD格式的jsPDF（比如上面的2.5.1版本），需要从全局对象里取出jsPDF构造函数，调整后的代码如下：
// 从全局window对象中获取jsPDF构造函数 const { jsPDF } = window.jspdf; var doc = new jsPDF(); var specialElementHandlers = { '#editor': function (element, renderer) { return true; } }; $('#cmd').click(function () { // 注意：新版jsPDF推荐使用html()方法替代fromHTML()，如果fromHTML报错可以试试这个 // doc.html($('#content').html(), { // callback: function(doc) { // doc.save('sample-file.pdf'); // }, // x: 15, // y: 15, // width: 170 // }); // 你的原有fromHTML代码（适合旧版本jsPDF） doc.fromHTML($('#content').html(), 15, 15, { 'width': 170, 'elementHandlers': specialElementHandlers }); doc.save('sample-file.pdf'); });
额外小贴士
- 如果你的项目需要严格匹配旧版jsPDF的
fromHTML方法，可以选择1.5.3版本的CDN，这个版本直接暴露全局jsPDF对象，不需要额外解构：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
- 确保脚本加载顺序正确：jsPDF脚本必须在你的自定义JS代码之前加载，否则浏览器会找不到
jsPDF对象。
内容的提问来源于stack exchange，提问作者markzzz
