解决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包含跨域图片报错

评论(0)Web开发网
阅读(58)喜欢(0)JavaScript/Ajax开发技巧