转载地址: https://segmentfault.com/a/1190000011789491
网页上要下载东西,下载一个资源(软件.exe 、 压缩包.zip 、 图片.png 、 本文.txt ),我们通过url打开,发现有的可以下载,有的直接显示了,这就有点尴尬了。先说说为什么有的资源就直接显示了。这是因为浏览器发现他可以自己打开了,所以他就觉得他要显示比如你的 .png .txt .html。那如果我们要下载怎么办?
这种东西呢,一般就两个办法,一个前端控制,一个后端控制。
后端控制 新给你一个url,加个下载头。浏览器一看,哎呦这个东西是要下载的,不需要打开,他就直接下载了。这样的下载需要后端人员配合,这咔咔咔就改代码。
前端控制 a标签的Download属性,加上以后,就是下载资源,这个好,想下载什么下载什么,但是呢,这种好用的东西在前端一般都有问题,什么问题?兼容问题呗,FF不支持跨域下载,非跨域下是可以下载的-测试地址。跨域情况,chrome里面设置filename不好使-测试地址同上。当然,还有我们要兼容的ie。
举个栗子:
//这样写成一个function可以让我们不用界面上放一个a标签,换成js触发。
a = document.createElement('a');
a.download = filename;
a.href = 'https://segmentfault.com';
// 触发点击
document.body.appendChild(a);
a.click();
document.body.removeChild(a);