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; }); }) );