一、<a>标签的作用
相信大部分人都知道<a>链接再简单不过了，跳转嘛，跳转到另外一个页面，这谁不知道。
当然这这是一部分， <a> 标签定义超链接，用于从一个页面链接到另一个页面。<a> 元素最重要的属性是 href 属性，它指定链接的目标。大家所熟知的一部分，
其实还有 如果将<a>链接加上download，那么一切都有点不一样了。
比如：<a href="https://www.baidu.com/img/baidu_jgylogo3.gif" download>下载 百度的图片</a>
<a href="https://www.baidu.com/img/baidu_jgylogo3.gif" download="牛逼.png">下载 百度的图片</a> /// 如果为download赋值，即相当于为下载文件命名
大家可以在编辑器里面试试。虽然它还是链接，但可点击这个链接，然后把一个资源下载下来，而不是再像以往用浏览器打开。
有了这个功能，我们就可以做一些事了。
二、new FileReader()
在做点特别的事前我们再来看看这个 api; new FileReader()，光看起来就像一个文件什么的东东对吧，其实它是一个下载文件的构造函数。将后台传过来的base64字符串转码成文件
那到底有什么用呢，你可能这样问，很明显了嘛，配合我们的 <a> 标签，不就是想下什么下载什么不。比如你想去个什么....网站（嘿嘿）
既然做下载我们就只关注它几个和文件下载有关的方法。
readAsBinaryString 将文件读取为二进制码
readAsDataURL 将文件读取为 DataURL （这也是例子程序中用到的方法）
readAsText [encoding] 将文件读取为文本
readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是
指图像与 html 等格式的文件。
在常规 HTTP 响应中，Content-Disposition响应标头是指示内容是否预期在浏览器中内联显示的标题，即，作为网页或作为网页的一部分或作为附件下载并且本地保存。
在一个multipart/form-data正文中，HTTP Content-Disposition通用标题是一个标题，可以在多部分主体的子部分中使用，以提供有关它适用的字段的信息。子部分由标题中定义的边界分隔Content-Type。用于身体本身，Content-Disposition没有任何作用。（单纯是个名字而已，嫌麻烦可忽略，虽然会用到，但是不妨碍它没用....）
下面直接撸干货：：
此处省略一万行代码，这样看起来像大牛.....haha
ajax请求后，记得返回需为 blob格式文件
ajax......then(res => {
let reader = new FileReader();
reader.readAsDataURL(res.bodyBlob); // 转换为base64，可以直接放入a标签href
reader.onload = function (e) {
// 转换完成，还记得我们上文的<a>标签吗，动态创建一个a标签用于下载
let a = document.createElement('a');
let fileName = '' ; //下载总得有个名字吧。
if (res.headers.map['Content-Disposition'] != null && res.headers.map['Content-Disposition'].length > 0) {
fileName = res.headers.map['Content-Disposition'][0];
} else if (res.headers.map['content-disposition'] != null && res.headers.map['content-disposition'].length > 0) {
fileName = res.headers.map['content-disposition'][0];
} else {
fileName = excel.xlsx;
}
fileName = fileName.substring(fileName.lastIndexOf(".")); // 一般从后台传过来的值我们都得修改的，截取想要的文件名，当然视情况而定，万一不用改呢
a.download = fileName; // 贴心的为 <a>标签的 download 赋个值 其实是这样了 <a download="fileName"> </a>
a.href = e.target.result; // 贴心的为 <a>标签的href 赋个值 其实是这样了 <a href="e.target.result" download="fileName"> </a> 是不是和上文一样，只需小手轻轻一按。
但是<a>里面没值找不到？没关系让浏览器来，先加到浏览器里
// $("body").append(a); // 修复firefox中无法触发click，如果firefox下载不了，我是没问题
document.querySelector("body").appendChild(a);
a.click(); /// 再
// $(a).remove(); 修复firefox中无法触发click，如果firefox下载不了，我是没问题
document.querySelector("body").removeChild(a); // 用完即抛弃，内存很小的
})
原创文章，转载请附链接