解决jquery.wordexport.js导出word包含跨域图片报错
使用jquery.wordexport.js导出word文档时,如果内容包含跨域的图片会报错,这个是由于wordexport使用canvas将图片转为base64图片字符串时导致的,由于安全问题跨域图片未允许跨域加载,未设置通过Access-Control-Allow-Origin控制允许ajax跨域请求的域名,是无法加载的。
网上找了下说给img标签添加crossOrigin = "Anonymous"属性,经过测试还是会报错,不同源或者被加载的图片未设置过Access-Control-Allow-Origin响应头,无法加载,被浏览器拦截下载
解决办法就是如果是跨域的图片(一般从网络路径加载),不执行替换,直接从网络加载就行。如果有离线要求,那么最好是经过自己的服务器同域下载文件,这样wordexport导出包含图片时就不会报错了。
方案1,直接从网络加载,找到下面的类似的代码,新增红色的那句就行,网络图片继续循环,不执行img替换
for (var i = 0; i < img.length; i++) {
if (/^https?:\/\//.test(img[i].src) && (location.hostname == '' || img[i].src.indexOf(location.hostname) == -1)) continue;//not relative uri or same origin or file protocol,download image from internet
///....其他代码
方案二,改为本站代理页面下载跨域页面实现同源
<div id="dvCT"> 内容。。。。。。</div><script> $('#dvCT img').attr('src', function () { if (/^https?:\/\//.test(this.src) && this.src.indexOf(location.hostname) == -1)//不同源将img改为本域下的代理页面负责下载图片变为同源 return 'mydownloadpage.ashx?url=' + encodeURIComponent(this.src); return this.src; }) $(window).load(function () { $('#dvCT').wordExport('hello') }) </script>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:解决jquery.wordexport.js导出word包含跨域图片报错