问题背景
最近帮朋友解决一个下载文件的Bug,功能是vue开发的一个网页展示人员信息包含人员头像,需要将网页转成PDF下载。开发人员利用html2canvas直接将dom节点转成图像并保存到pdf里面下载,于是在canvas.toDataURL
时出现错误Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
。
出错代码:
html2Canvas(targetDom, {
allowTaint: true,
}).then(function (canvas) {
....
let pageData = canvas.toDataURL("image/jpeg", 1.0); // 保存canvas图像,出错代码
...
PDF.save(_this.$route.query.title + ".pdf"); // 保存pdf文档,本地下载pdf文件
});
修复
从前端报错来看是跨域问题,查看源码,图片已经添加了跨域信息,且服务器已经对跨域做了处理,即服务器已经支持跨域。
imgDom.setAttribute("crossOrigin", 'Anonymous')
经过漫长的百度、Google之后,最终在stackoverflow找到解决办法:
html2Canvas(targetDom, {
allowTaint: true,
useCORS: true //添加代码
})
html2Canvas
传入参数增加useCORS: true,然后文件顺利诞生。
至于原理:下回分解