使用jsPDF的addHTML方法报错：TypeError: pdf.addHTML() is not a function

你遇到的问题主要来自重复引入多个版本的jsPDF以及依赖库和核心库的加载顺序错误，下面一步步帮你修复：

问题分析 #

1. 重复引入jsPDF导致冲突：你同时引入了两个不同版本的jsPDF（1.3.5的jspdf.debug.js和1.3.2的jspdf.js），后引入的库会覆盖之前的，这很可能导致addHTML方法被意外覆盖或未正确加载。
2. 依赖库加载顺序错误：rasterizeHTML（或html2canvas）作为addHTML的依赖，需要在jsPDF之前加载，否则jsPDF无法正确初始化这个扩展方法。
3. 版本兼容性：旧版jsPDF的addHTML依赖外部渲染库，重复引入核心库会破坏插件的正常加载逻辑。

修复步骤 #

1. 清理重复的jsPDF引入 #

只保留一个版本的jsPDF，建议使用你之前引入的1.3.5版本，删掉本地1.3.2版本的引入代码：

<!-- 先引入依赖库rasterizeHTML -->
<script src="C:/Users/trist/AppData/Roaming/npm/node_modules/rasterizehtml/dist/rasterizeHTML.allinone.js"></script>
<!-- 只保留一个版本的jsPDF核心库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>

2. 确保addHTML插件被正确加载 #

确认你引入的jspdf.debug.js包含了addHTML插件（通常debug版本会打包所有官方插件），如果没有，需要单独引入addhtml.js文件，放在jsPDF核心库之后：

<script src="path/to/your/jsPDF-1.3.5/plugins/addhtml.js"></script>

3. 修正你的JS逻辑 #

添加DOM加载完成的监听，避免按钮元素还未渲染就绑定事件，调整后的代码如下：

// 等待DOM完全加载后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  var pdf = new jsPDF(); 
  var btn = document.getElementById("btn"); 
  btn.addEventListener('click', function(){
    pdf.addHTML(document.body, function() { 
      pdf.save('test.pdf'); 
    }); 
  });
});

备选方案：使用新版jsPDF的html()方法 #

如果上述方法仍有问题，建议升级到jsPDF 2.x版本，新版已经弃用addHTML，改用更稳定的html()方法，对依赖的处理也更友好：

<!-- 引入新版jsPDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<!-- 引入html2canvas作为依赖 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

对应的JS代码：

document.addEventListener('DOMContentLoaded', function() {
  const { jsPDF } = window.jspdf;
  const btn = document.getElementById("btn");
  btn.addEventListener('click', async function() {
    const pdf = new jsPDF('p', 'mm', 'a4');
    // 异步转换HTML为PDF
    await pdf.html(document.body, {
      callback: function(pdf) {
        pdf.save('test.pdf');
      }
    });
  });
});

额外检查点 #

• 确认本地rasterizeHTML的文件路径正确，可通过浏览器开发者工具的Network标签查看是否有404加载错误
• 尽量避免使用本地磁盘绝对路径（C:/）引入资源，建议将依赖库放在项目目录下，使用相对路径引入，减少路径解析问题

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