前端图片下载 - 码农教程

2020-09-25 16:08:19

问题概要

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

<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();
  }

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

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

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