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