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

1、<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赋值，即至关于为下载文件命名

 你们能够在编辑器里面试试。虽然它仍是连接，但可点击这个连接，而后把一个资源下载下来，而不是再像以往用浏览器打开。

有了这个功能，咱们就能够作一些事了。

 

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

　　})

   

 

　　　　原创文章，转载请附连接