使用html2canvas与jsPDF渲染HTML+CSS生成PDF无响应问题排查

我帮你梳理下代码里的几个关键问题，这些应该就是导致点击下载没反应的原因啦：

1. 重复引入库引发冲突 #

你重复引入了多套功能相同但版本不一致的库，这很容易造成变量覆盖、函数异常，直接导致代码无法正常执行：

• jQuery：先引入了CDN的1.12.4版本，后面又引入了本地的jquery.js
• jsPDF：同时加载了0.9.0rc1和1.3.4两个版本
• html2canvas：依次引入了html2canvas.js、html2canvas.min.js和jquery.plugin.html2canvas.js

解决方法：只保留一套兼容且稳定的库，比如：

<!-- 仅保留一个jQuery版本 -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<!-- 选择一个稳定的jsPDF版本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<!-- 只保留核心的html2canvas库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

2. html2canvas旧API已失效 #

你用的onrendered回调是html2canvas的旧版语法，现在这个API已经被弃用了，改用Promise方式实现，旧回调大概率不会被触发：

修改后的genPDF函数：

function genPDF() {
  html2canvas(document.body).then(function(canvas) {
    // 将canvas转为PNG格式的DataURL
    var img = canvas.toDataURL("image/png");
    // 初始化jsPDF实例
    var doc = new jsPDF();
    // 注意图片格式要和toDataURL一致，这里用'PNG'
    doc.addImage(img, 'PNG', 20, 20);
    doc.save('test.pdf');
  }).catch(function(error) {
    // 捕获渲染错误，方便调试
    console.error('html2canvas渲染失败:', error);
  });
}

3. 图片格式不匹配 #

你用canvas.toDataURL("image/png")生成了PNG格式的图片，但addImage方法里指定的是'JPEG'，格式不匹配会导致图片加载异常，进而PDF生成失败。要保持格式统一，要么都用PNG，要么都用JPEG。

4. 实用调试技巧 #

• 打开浏览器开发者工具（按F12），切换到Console面板，查看是否有报错信息，这能快速定位问题根源
• 检查本地html2canvas.js这类文件的路径是否正确，如果路径错误，库无法加载也会导致函数未定义

修复后的完整代码示例 #

<html>
<head>
</head>
<body>
<div id="editor"></div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script type="text/javascript">
function genPDF() {
  html2canvas(document.body).then(function(canvas) {
    var img = canvas.toDataURL("image/png");
    var doc = new jsPDF();
    doc.addImage(img, 'PNG', 20, 20);
    doc.save('test.pdf');
  }).catch(function(err) {
    console.log('生成PDF出错:', err);
  });
}
</script>

<div id="content">
<h3>Hello, this is a H3 tag</h3>
<p>a paragraph</p>
</div>
<a href="javascript:genPDF()">Download PDF</a>
</body>
</html>

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