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

出现的问题其中页面中的图片 导出之后不显示一、最常见原因图片跨域90%都是这个❗现象页面上图片正常显示导出 PDF 图片消失原因html2canvas 在渲染 canvas 时如果图片是跨域资源浏览器会阻止读取安全策略导致图片被“污染tainted canvas”最终导出为空。解决方案方案1开启useCORShtml2canvas(element, { useCORS: true })前提条件图片服务器必须支持跨域有响应头Access-Control-Allow-Origin: *方案2图片加crossOriginimg srchttps://xxx.com/image.png crossoriginanonymous /注意如果服务器没有配置 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; }); }) );