使用jsPDF与autotable将HTML表格生成PDF时出现TypeError错误求助
解决jsPDF-autotable报错:Uncaught TypeError: t.getDocument().getFillColor is not a function
这个错误我之前帮人排查过,九成是jsPDF和autotable的版本不兼容导致的——autotable 3.5.x系列对jsPDF的版本有严格要求,要是你用的jsPDF版本太新或太旧,就会出现这类方法找不到的问题。
给你几个具体的解决步骤:
1. 替换成兼容的CDN版本组合
autotable 3.5.23官方推荐搭配jsPDF 2.5.1,直接把你的CDN链接换成下面的:
<!-- 先加载jsPDF --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> <!-- 再加载autotable插件 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script>
注意加载顺序不能反,必须先加载jsPDF再加载autotable。
2. 修正代码里的潜在问题
- 确保
pdfName是合法的字符串,比如改成doc.save("my-table.pdf");,避免变量未定义导致的隐藏问题; - 把JS代码放在表格元素之后,或者用
DOMContentLoaded包裹,保证执行代码时表格已经渲染完成:document.addEventListener('DOMContentLoaded', function() { const doc = new jsPDF({ orientation: "landscape", unit: "mm", format: [300, 260] }); doc.text(25, 25, "Header"); doc.addPage(); doc.autoTable({ html: '#my-table' }); doc.save("my-table.pdf"); });
3. 先测试简化版代码
如果还是有问题,先去掉自定义尺寸,用默认配置测试,排除尺寸参数的影响:
const doc = new jsPDF({ orientation: "landscape" }); doc.text(25, 25, "Header"); doc.autoTable({ html: '#my-table' }); doc.save("test.pdf");
4. 排查冲突问题
如果上面的方法都不行,暂时禁用页面里的其他JS库(比如jQuery、其他插件),看看是不是有全局变量冲突导致jsPDF的方法被覆盖了。
内容的提问来源于stack exchange,提问作者FlowingCode




