我来帮你定位这个问题，结合你的代码和场景，点击按钮无反应且控制台报错，大概率是canvas生成或PDF添加图片环节出了问题，咱们从几个常见方向排查：

1. 跨域资源污染canvas #

如果#node元素里包含跨域图片/资源（比如其他域名的图片、未配置CORS的CDN资源），浏览器会因为安全限制污染canvas，导致toDataURL()调用失败，进而整个流程卡死。

• 检查元素内的资源：如果有跨域图片，给图片加上crossorigin="anonymous"属性，同时确保资源服务器配置了Access-Control-Allow-Origin响应头；
• 临时测试：把跨域资源换成本地图片，看是否能正常生成PDF。

2. html2canvas配置缺失 #

html2canvas需要明确开启跨域支持才能处理跨域资源，修改你的调用代码，添加必要配置：

html2canvas(document.getElementById("node"), {
  useCORS: true, // 允许加载跨域资源
  allowTaint: false, // 禁止污染canvas
  logging: true // 开启日志，方便控制台排查渲染问题
}).then(canvas => {
  // 后续PDF生成逻辑
});

3. canvas.toDataURL格式或参数问题 #

你当前用的是JPEG格式（质量1），如果元素包含透明区域，JPEG会把透明转成黑色，部分浏览器可能因此出现渲染异常。可以先换成PNG格式测试：

const img = canvas.toDataURL("image/png");
// 对应addImage也要修改格式标识
pdf.addImage(img,"PNG",5,5,205,292);

4. jsPDF页面尺寸与图片尺寸不匹配 #

你当前设置的图片尺寸205,292如果和jsPDF默认页面单位（pt）不匹配，会导致图片无法正确添加。建议明确指定PDF的页面参数（比如A4纸、毫米单位）：

// 初始化PDF：纵向、毫米单位、A4纸
const pdf = new jsPDF('p', 'mm', 'a4');
// 添加图片：边距5mm，尺寸适配A4可打印区域
pdf.addImage(img,"JPEG",5,5,200,287);

最关键的：利用控制台报错信息定位 #

你提到控制台有报错，这是最快定位问题的线索！比如：

• 出现Tainted canvases may not be exported.：就是跨域资源污染了canvas；
• 出现Failed to load resource：是html2canvas或jsPDF的脚本加载失败；
• 出现Invalid image data：是canvas转成的base64数据有问题。

你可以先把控制台的具体报错内容贴出来，能更精准地解决问题。另外也可以先简化#node元素（比如只放纯文本），测试基础流程是否正常，再逐步添加复杂元素排查。

内容的提问来源于stack exchange，提问作者Peter Bašista