前端图片下载
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();
}缺陷：这种方法需要图片服务器允许跨域才可能实现。
通过后台中转的方式就无需特殊条件，只不过增加了服务器的流量及带宽。
所以，如何取舍还看自身条件来选择合适的方式来实现即可。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录