Laravel中使用jsPDF 2.5.2出现类型错误问题求助

问题详情 #

开发Laravel项目时，使用jsPDF 2.5.2版本实现PDF导出，相关代码及报错如下：

导出JS代码 #

document.getElementById('exportPDF').addEventListener('click', function() {
    var { jsPDF } = window.jspdf.jsPDF;
    var doc = new jsPDF();
    doc.autoTable({ html: '#Table1' });
    doc.save('AccountList.pdf');
});

Blade文件引入脚本 #

<!-- in the blade file -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/jspdf.umd.min.js"></script>

控制台报错 #

Uncaught TypeError: Cannot read properties of undefined (reading 'jsPDF')

注：jsPDF 2.3.1版本使用var { jsPDF } = window.jspdf;可正常运行。

解决方案 #

1. 修正jsPDF实例化逻辑
   jsPDF 2.5.2的UMD模块导出结构未嵌套jsPDF子属性，直接从window.jspdf解构即可，写法与旧版本一致：

document.getElementById('exportPDF').addEventListener('click', function() {
    var { jsPDF } = window.jspdf;
    var doc = new jsPDF();
    doc.autoTable({ html: '#Table1' });
    doc.save('AccountList.pdf');
});

2. 补充引入autoTable依赖
   autoTable是jsPDF的独立插件，仅引入基础jsPDF库无法使用该功能，需额外添加脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js"></script>

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