Javascript 如何实现base64转文件下载保存到本地

BytesIO二进制流文件（内存缓存）转json格式传输到前端

加码

#读取二进制序列
io_file = BytesIO()
f.save(io_file)
data = io_file.getvalue()
base64_data = base64.b64encode(data)
#字符串化，使用utf-8的方式解析二进制
base64_str = str(base64_data,'utf-8')
1
2
3
4
5
6
7

解码

base64_data = base64_str.encode(encoding='utf-8')
data = base64.b64decode(base64_data)
1
2

base64转文件下载（方法1）

<script>
  //将base64转换为blob
  function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
  }
  // * desc: 下载方法
  // * @param url  ：返回数据的blob对象或链接
  // * @param fileName  ：下载后文件名标记
  function downloadFile(url, name = "What's the fuvk") {
    var a = document.createElement("a");
    a.setAttribute("href", url);
    a.setAttribute("download", name);
    a.setAttribute("target", "_blank");
    let clickEvent = document.createEvent("MouseEvents");
    clickEvent.initEvent("click", true, true);
    a.dispatchEvent(clickEvent);
  }
  // * desc: 下载参数入口
  // * @param base64  ：返回数据的blob对象或链接
  // * @param fileName  ：下载后文件名标记
  function downloadFileByBase64(base64, fileName) {
    var myBlob = dataURLtoBlob(base64);
    var myUrl = URL.createObjectURL(myBlob);
    downloadFile(myUrl, fileName);
  }
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

注意的点：
bytesio转base64的适合记得要带上header，即mimetype类型

因为不同的文件类型base64前面拼接的不同

//根据文件后缀 获取base64前缀不同
 function getBase64Type(type) {
      switch (type) {
        case 'txt': return 'data:text/plain;base64,';
        case 'doc': return 'data:application/msword;base64,';
        case 'docx': return 'data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,';
        case 'xls': return 'data:application/vnd.ms-excel;base64,';
        case 'xlsx': return 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,';
        case 'pdf': return 'data:application/pdf;base64,';
        case 'pptx': return 'data:application/vnd.openxmlformats-officedocument.presentationml.presentation;base64,';
        case 'ppt': return 'data:application/vnd.ms-powerpoint;base64,';
        case 'png': return 'data:image/png;base64,';
        case 'jpg': return 'data:image/jpeg;base64,';
        case 'gif': return 'data:image/gif;base64,';
        case 'svg': return 'data:image/svg+xml;base64,';
        case 'ico': return 'data:image/x-icon;base64,';
        case 'bmp': return 'data:image/bmp;base64,';
      }
   
 //附上获取文件后缀的方法  
 function getType(file) {
     var filename = file;
     var index1 = filename.lastIndexOf(".");
     var index2 = filename.length;
     var type = filename.substring(index1 + 1, index2);
     return type;
   },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

base64转文件下载（方法2）

// * desc: 下载导出文件
// * @param blob  ：返回数据的blob对象或链接
// * @param fileName  ：下载后文件名标记
// * @param fileType  ：文件类 word(docx) excel(xlsx) ppt等
downloadExportFile(blob, fileName, fileType) {
  const downloadElement = document.createElement('a')
  let href = blob
  if (typeof blob === 'string') {
    downloadElement.target = '_blank'
  } else {
    href = window.URL.createObjectURL(blob) // 创建下载的链接
  }
  downloadElement.href = href
  downloadElement.download = fileName + '.' + fileType // 下载后文件名
  document.body.appendChild(downloadElement)
  downloadElement.click() // 触发点击下载
  document.body.removeChild(downloadElement) // 下载完成移除元素
  if (typeof blob !== 'string') {
    window.URL.revokeObjectURL(href) // 释放掉blob对象
  }
},
// * desc: base64转文件并下载
// * @param base64 {String} : base64数据
// * @param fileType {String} : 要导出的文件类型png,pdf,doc,mp3等
// * @param fileName {String} : 文件名
downloadFile(base64, fileName, fileType) {
  const typeHeader = 'data:application/' + fileType + ';base64,' // 定义base64 头部文件类型
  const converedBase64 = typeHeader + base64 // 拼接最终的base64
  const blob = this.base64ToBlob(converedBase64, fileType) // 转成blob对象
  this.downloadExportFile(blob, fileName, fileType) // 下载文件
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

使用

this.downloadFile('你的base64数据','你的文件名称','你的文件数据类型');
1

上述方法有一定的问题，base64ToBlob方法是缺失的，可以参考方法1中的如何实现，主要干的事就是把base64的数据加上header，方法1的是在后端实现了，而该方法是在前端js中添加的，只不过方法并没有写，其实就是拼接。