html2Canvas+jsPDF 下载PDF 遇到跨域的对象存储的图片无法显示

html2Canvas+jsPDF 下载PDF 遇到跨域的对象存储的图片无法显示_第1张图片

 

html2Canvas+jsPDF 下载PDF 遇到跨域的对象存储的图片无法显示_第2张图片

 

一、问题原因 

对象存储的域名和你网址的域名不一样,此时用Canvas相关插件 将DOM元素转化为PDF,就会出现跨域错误。

二、解决办法  两步

1. 图片元素上设置属性  crossorigin="anonymous"  支持原生img和eleme组件

 2. 存储桶设置资源跨域访问

阿里腾讯云为例:↓

阿里云OSS设置跨域访问-阿里云开发者社区

腾讯云OOS设置跨域访问


html2Canvas+jsPDF 下载PDF 遇到跨域的对象存储的图片无法显示_第3张图片

 

静待几分钟, 不是立即生效的!

你可能感兴趣的:(pdf,前端,vue.js,对象存储,html2Canvas)