download使用浅析

先来介绍一下我们的主角download让我们有一个简单认识,图中我们可以看到a标签的download属性，他是用来指定可以下载，值是filename。图片来源

再来说说场景，网页上要下载东西，下载一个资源（软件.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);