js如何下载后台传过来的base64文件

一、<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); // 用完即抛弃，内存很小的

　　})

　　　　原创文章，转载请附链接