JS实现文件下载的几种方法

JS 实现下载功能的几种方法

敬你一杯毒鸡汤解解渴：
人生三大真理：暴力真的可以解决一切，帅真的可以当饭吃，有钱真的可以为所欲为。

本文主要讲述的是已知一个文件在服务器的地址（即后端提供的下载接口），在页面上怎么实现点击按钮下载的问题。

分析一下我所知道几种办法吧：

1. HTML的a标签

   <a href="url" download="">点击下载</a>
   

   这是最直观也是最常用的方法了，a标签按需求设置样式就行了。

   但是！注意了：a标签大家都知道代表超链接的意思，如果url指向的是一个浏览器可以解析的文件比如png，gif，txt，html，pdf文件等，浏览器会默认打开文件，而不是下载。
   虽然download属性会规定被下载的超链接目标，但是这个属性是HTML5的新属性，而且兼容行不好，目前只兼容谷歌和火狐相对高版本的浏览器。所以使用时要注意你下载的文件类型。

2. 点击按钮后，通过js实现下载

   <input type="button" onclick="downloadFile()">点击下载</a>
   

   方法一： 还是a标签，通过js动态生成a标签

   	function downloadFile () {
   		let domA = document.createElement('a'); // js创建a标签
           domA.setAttribute('download', ''); // 给a标签设置download属性
           domA.setAttribute('href', url); // 给a标签href属性赋值为要下载文件的路径
           domA.click(); // 点击下载
   	}
   

   这个方法原理和页面的a标签是一样的。

   方法二： window.open()

   	function downloadFile () {
   		window.open(url);
   	}
   

   代码非常简单哈，但是非常不推荐，因为window.open被触发时会先打开一个空白页面，然后关闭这个空白页面后，才会执行下载。体验很差呦~

   方法三：通过表单提交完成下载

   	function downloadFile () {
   		let domForm = document.createElement('form'); // 创建一个form表单元素
   		domForm.setAttribute('method', 'get'); // 设置请求方式为get
   		domForm.setAttribute('action', url); // 设置action属性为文件下载路径
   		document.body.appendChild(domForm); // 将form元素放在body元素下
   		domForm.submit(); // 提交表单实现下载
   	}
   

   相当于执行了一次表单的提交。
   

   老规矩，磨叨磨叨，个人理解哈：

   话说为啥上面这些方式能实现文件的下载呢？
   仔细看会发现其实方法大同小异，都是在访问目标文件的存储路径。
   正常情况下，浏览器访问一个路径，如果这个路径指向的是html，gif，pdf等这种文件，浏览器能看明白啊，就直接解析了，展示在浏览器新开的页面上。
   但是如果这个路径指向的是Excel，word，zip等这种浏览器无法解析的文件，浏览器打不开就默认下载了，于是我们才能用这些功能执行下载。

   哀家乏了，先这样吧……