vue 使用html2canvas + jsPDF 将html导出为pdf (延伸问题)

出现的问题：其中页面中的图片 导出之后不显示

一、最常见原因：图片跨域（90%都是这个）

❗现象

• 页面上图片正常显示
• 导出 PDF 图片消失

原因

html2canvas 在渲染 canvas 时，如果图片是 跨域资源，浏览器会阻止读取（安全策略），导致图片被"污染（tainted canvas）"，最终导出为空。

---

解决方案

方案1：开启 useCORS

html2canvas(element, {
    useCORS: true
})

前提条件：

• 图片服务器必须支持跨域（有响应头）

Access-Control-Allow-Origin: *

---

方案2：图片加 crossOrigin

<img src="https://xxx.com/image.png" crossorigin="anonymous" />

---

注意

如果服务器 没有配置 CORS，上面两个都没用！

---

方案3（推荐）：转 Base64（最稳）

把图片转成 base64 再渲染：

function getBase64Image(img) {
  const canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  return canvas.toDataURL("image/png");
}

👉 或后端直接返回 base64

二、图片未加载完成

现象

偶尔显示，偶尔不显示

解决

确保图片加载完再执行：

await Promise.all(
  Array.from(document.images).map(img => {
    if (img.complete) return Promise.resolve();
    return new Promise(resolve => {
      img.onload = img.onerror = resolve;
    });
  })
);