You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

使用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

火山引擎 最新活动