javascript Nodejs ·

前端图片下载

问题概要

前段时间遇到一个功能,挺简单,下载附件。自己也觉得很简单,于是开开心心写下了如下代码:

<a href="文件地址" download >文件名称</a>

然后放到在测试的时候自信的点了一下,然后不开心了,图片直接被打开了,根本没有下载,但是有的是可以下载的,很奇怪。

问题原因

经过仔细分析发现,当文件地址和当前页面同源时可以正常下载,当非同源时就下载失败了。

解决办法

既然找到了问题所在,那么解决起来就很方便了,之前我写过一篇文章,是通过服务器中转的方式来实现的,将非同源的文件转成同源,于是就可以下载了:传送门

如果不经过后台,直接通过前端来实现,也有相应的方法,我们来看一下:

downloadImg(src,name){
    console.log(src)
    var x=new XMLHttpRequest();
    //禁止浏览器缓存;否则会报跨域的错误
    x.open("GET", src+'?t='+new Date().getTime(), true);
    x.responseType = 'blob';
    x.onload=function(e){
      var url = window.URL.createObjectURL(x.response)
      var a = document.createElement('a');
      a.href = url
      a.download = name
      a.click()
    }
    x.send();
  }

缺陷:这种方法需要图片服务器允许跨域才可能实现。

通过后台中转的方式就无需特殊条件,只不过增加了服务器的流量及带宽。

所以,如何取舍还看自身条件来选择合适的方式来实现即可。

参与评论