本文详解 jspdf 常见的“jspdf is not defined”错误原因及解决方案，涵盖 cdn 版本选择、全局变量访问方式、esm 兼容性注意事项，并提供可直接运行的完整示例代码。
本文详解 jspdf 常见的“jspdf is not defined”错误原因及解决方案，涵盖 cdn 版本选择、全局变量访问方式、esm 兼容性注意事项，并提供可直接运行的完整示例代码。
在前端开发中，使用 jsPDF 将网页内容导出为 PDF 是一项高频需求。但初学者常遇到 Uncaught ReferenceError: jsPDF is not defined 报错——这并非代码逻辑错误，而是库加载与模块暴露方式不匹配导致的典型问题。
✅ 根本原因分析
jsPDF 自 v2.x 起默认采用 UMD（Universal Module Definition）格式打包，其浏览器版（如 jspdf.umd.min.js）不会将 jsPDF 类直接挂载到全局 window 对象顶层，而是将整个包对象赋值给 window.jspdf。因此，直接调用 new jsPDF() 会失败，因为 jsPDF 变量未声明；必须通过 window.jspdf.jsPDF 或解构获取构造函数。
此外，CDN 版本需严格匹配官方发布版本。当前（截至 2024 年）稳定最新版为 2.5.1（非问题中误用的 2.5.3），错误版本会导致脚本加载失败或 API 不兼容。
✅ 推荐写法：显式解构 + 正确 CDN
以下为经过验证、开箱即用的完整示例：
<!DOCTYPE html>
<html>
<head>
<title>jsPDF 快速入门</title>
</head>
<body>
<div id="abc">
<p>Hello, World!</p>
</div>
<button id="cmd">Generate PDF</button>
<!-- 使用官方推荐 CDN（v2.5.1，含 SRI 安全校验） -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"
integrity="sha512-qZvrmS2ekKPF2mSznTQsxqPgnpkI4DNTlrdUmTzrDgektczlKNRRhy5X5AAOnx5S09ydFYWWNSfcEqDTTHgtNA=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
<script>
function generatePDF() {
// ✅ 正确方式：从 window.jspdf 解构出 jsPDF 构造函数
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.text('Hello, World!', 10, 10);
doc.save('my-document.pdf');
}
document.getElementById('cmd').addEventListener('click', generatePDF);
</script>
</body>
</html>⚠️ 注意事项与最佳实践
-
不要省略
window.jspdf访问路径：虽然 JavaScript 作用域链会向上查找window属性（即jsPDF可能“意外”工作），但这是不可靠的隐式行为，易受其他脚本干扰，且降低可读性与可维护性。 - 避免使用过时或不存在的版本号：务必查阅 jsPDF npm 页面 或 GitHub Releases 获取真实可用版本。
-
现代项目建议使用 ES 模块导入（如 Vite/Webpack）：
import { jsPDF } from "jspdf"; const doc = new jsPDF(); -
中文支持需额外字体：若需输出中文，请引入自定义字体（如
simhei.ttf）并使用addFileToVFS+addFont方法，原生不支持 UTF-8 中文。
✅ 总结
jsPDF is not defined 错误本质是「调用方式」与「库导出规范」不一致。只需两点即可彻底解决：
1️⃣ 使用 window.jspdf.jsPDF 或解构 const { jsPDF } = window.jspdf；
2️⃣ 引入 经验证的稳定 CDN 版本（如 2.5.1）。
掌握此模式后，你即可安全扩展功能——例如将 <div id="abc"> 内容转为 PDF、添加图片、设置页眉页脚等，真正迈出前端 PDF 生成的第一步。</div>
