前端涉及到的文件下载还是很多应用场景的，那么前端文件下载有多少种方式呢？每种方式有什么优缺点呢？下面就来一一介绍。

1. a 标签

通过a标签的download属性来实现文件下载，这种方式是最简单的，也是我们比较常用的方式，先来看示例代码：

下载

就上面的这个示例，我们点击下载，发现是跳转到了百度的首页，并没有真的下载文件。

因为a标签下载只能下载同源的文件，如果是跨域的文件，这里包括图片、音视频等媒体文件，都是预览，也无法下载。

上面的代码是直接通过书写a标签来实现文件下载，我们也可以通过js来实现，代码如下：

consta=document.createElement('a')a.href='http://www.baidu.com'a.download='baidu.html'a.click()

效果和上面的一样，都是跳转到百度的首页，没有下载文件。

这里的重点是a标签的download属性，这个属性是HTML5新增的。

它的作用是指定下载的文件名，如果不指定，那么下载的文件名就会根据请求内容的Content-Disposition来确定，如果没有Content-Disposition，那么就会使用请求的URL的最后一部分作为文件名。

2. window.open

上面使用a标签的案例也可以通过window.open来实现，效果是一样的，代码如下：

window.open('http://www.baidu.com','_blank')

这里的_blank是指定打开的方式，如果不指定，那么就会在当前页面打开，这里指定_blank，就是在新的页面打开。

同样a标签的download属性也是可以使用的，代码如下：

window.open('http://www.baidu.com','_blank','download=baidu.html')

当然这种方式也是有缺陷的，对比于a标签，这种方式不能下载.html、.htm、.xml、.xhtml等文件，因为这些文件会被当成html文件来处理，所以会直接在当前页面打开。

同样也不能下载跨域的文件，毕竟是window.open，不是window.download（window.download是假想）。

3. location.href

这种方式和window.open(url)是一样的，代码如下：

location.href='http://www.baidu.com'

这种方式拥有window.open的所有缺陷，所以不推荐使用，这里只当作了解，所以不做过多的讲解。

4. location.?其他属性

这里的其他指代的都是能跳转页面的属性，比如location.assign、location.replace、location.reload等，这些属性都是可以实现文件下载的，代码如下：

location.assign('http://www.baidu.com')location.replace('http://www.baidu.com')location.reload('http://www.baidu.com')

这里的location.reload是有点特殊的，它的作用是重新加载当前页面，但是它也可以接受一个参数，这个参数就是要跳转的页面，所以也可以实现文件下载。

当然同location.href一样，这些方式的缺点都一样，同时还有属于每个属性自身的特性，这里只当拓展知识，不做过多的讲解。

5. XMLHttpRequest

这种方式就是我们常说的ajax下载，包括axios、fetch等都是相同的，代码如下：

constxhr=newXMLHttpRequest()xhr.open('GET','http://www.baidu.com')xhr.send()xhr.onload=function(){constblob=newBlob([xhr.response],{type:'text/html'})consta=document.createElement('a')a.href=URL.createObjectURL(blob)a.download='baidu.html'a.click()}

这里就不讲和XMLHttpRequest相关的知识了，只讲和文件下载相关的部分。

这里主要的逻辑是当我们的请求成功后，我们会拿到响应体的response，这个response就是我们要下载的内容，然后我们把它转换成blob对象，然后通过URL.createObjectURL来创建一个url，然后通过a标签的download属性来实现文件下载。

这里的知识点就有两个，一个是blob对象，一个是URL.createObjectURL。

5.1 blob

下面是blob对象的定义，来自MDN[2]：

Blob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成ReadableStream来用于数据操作。

Blob表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承了blob的功能并将其扩展以支持用户系统上的文件。

blob对象是html5新增的对象，它的作用是用来存储二进制数据的，比如图片、视频、音频等，它的使用方法如下：

/***@param{Array}array二进制数据*@param{Object}options配置项*@param{String}options.type 文件类型，它代表了将会被放入到 blob 中的数组内容的 MIME 类型。*@param{String}options.endings 用于指定包含行结束符\n的字符串如何被写入。默认为transparent，表示不会修改行结束符。还可以指定为native，表示会将\n转换为\r\n。*/constblob=newBlob([],{type:''})

这里主要关注的是type属性，默认情况下，blob对象是没有type属性的，那么这个Blob就是一个无类型的Blob，文件不会损毁，但是无法被正常识别。

5.2 URL.createObjectURL

下面来自MDN[3]：

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的 URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。

这个方法是用来创建一个url的，它的作用是把一个blob对象转换成一个url，这个url可以用来下载文件，也可以用来预览文件，代码如下：

consturl=URL.createObjectURL(blob)

这里需要注意的是，这个url的生命周期和创建它的窗口中的document绑定，也就是说，当我们的document被销毁后，这个url就会失效，所以我们需要在合适的时机销毁它，代码如下：

URL.revokeObjectURL(url)

回到我们刚才下载的问题，我们是通过blob对象来解决，但是我们的type属性是写死的，如果在文件类型是确定的情况下是没问题的，但是如果这个接口就是下载文件的接口，文件可能是各种类型的，我们应该怎么处理？

这里的没有正确答案，第一个可以和接口提供者进行协商，协商方案是不确定的，第二就是通过response的header来获取文件的type，也是我们要讲的：

consttype=response.headers['content-type']constblob=newBlob([response.data],{type})

这里我们通过response的header来获取type，然后再创建blob对象，这样就可以正确的下载文件了。

其实content-type也可能是application/octet-stream，这个时候我们就需要通过file-type来获取文件的type了。

下面的代码是通过file-type来获取文件的type：

import{fileTypeFromStream}from'file-type';consttype=awaitfileTypeFromStream(response.body);constblob=newBlob([response.data],{type})

6.FileSaver.js插件

6.1 简介

FileSaver.js 是在客户端保存文件的解决方案，非常适合在客户端生成文件的 Web 应用程序

6.2 基本使用

以下内容基于官方文档，官方文档传送门

注意：存在文件保存的大小限制，具体大小看官方文档

6.2.1 安装

npm install file-saver --save

6.2.2 语法

import FileSaver from 'file-saver';FileSaver saveAs(Blob/File/Url,fileType)// 参数1：支持的类型：blob（二进制）、File（文件）、Url（url链接）// 参数2：文件类型

HTTP Content-type对照表

6.2.3 保存文本

// 保存文本saveText() {// 创建二进制文件let blob = new Blob(['保存一个文本'],{type: 'text/plain;charset=utf-8'});FileSaver.saveAs(blob,'a.txt');}

结果：

6.2.4 保存url

 saveUrl() { FileSaver.saveAs('https://ppt.1ppt.com/uploads/soft/2202/1-2202231A334.zip', 'a.zip'); }

碰到了几个问题，知道如何解决的麻烦说一下.
1、对于图片、视频这样可以在浏览器打开的文件，不会下载，而是在浏览器新窗口里打开
这个问题应该可以通过：使用saveAs方法时设置文件类型；或者将文件转成二进制流，下载二进制流（未尝试）

6.2.5 保存canvas

var canvas = document.getElementById("my-canvas");canvas.toBlob(function(blob) {saveAs(blob, "pretty image.png");});

这个没有试过

6.2.6 保存文件

 saveFile() {let file = new File(['保存一个文件'],'a.txt',{type: 'text/plain;charset=utf-8'});FileSaver.saveAs(file); }

7. 总结

上面的方案这么多，其实最终还是落到a标签上，所以不管是通过浏览器的内置行为进行下载，还是通过ajax进行下载，文件下载的最终还是浏览器的行为。

—END—