base64转二进制流并下载，文件流zip下载

夏子涵呀呀呀

已于 2023-10-23 10:18:00 修改

阅读量576

点赞数

文章标签： javascript 前端

于 2023-04-06 18:04:15 首次发布

本文链接：https://blog.csdn.net/aizenmoxiguan/article/details/129995553

版权

文章介绍了如何将base64编码转换为二进制流并使用Blob对象进行文件下载，包括dataURLtoBlob函数用于base64转Blob，以及downLoadBya函数通过a标签实现下载。同时，文章提到了从后台获取blob流下载zip文件的处理方法。

摘要由CSDN通过智能技术生成

base64转二进制流文件

/**
 * base64转二进制流
 * @param {*} data base64
 * @returns 
 */
export function dataURLtoBlob(data) {
  var arr = data.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),  //这边要取base64后面的数据
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

下载方法

/**
 * 下载通过a链接
 * @param {*} url base64
 * @param {*} name 名字
 * @param {*} type 后缀名
 */
export const downLoadBya = function (url, name = (+new Date()), type = 1) {
  const link = document.createElement('a')
  link.style.display = 'none'
  console.log(dataURLtoBlob(url));
  const objectUrl = window.URL.createObjectURL(dataURLtoBlob(url)) //这边获取后的blob要执行window.URL.createObjectURL
  link.href = objectUrl
  link.setAttribute('download', `${name}.${type ==1 ? 'png' : type==2? 'svg':'jpg'}`)
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

参考链接：https://juejin.cn/post/6844903700222181384
https://blog.csdn.net/cdy_1/article/details/126989107

后台返回文件流下载zip文件

1、请求的时候要加上
responseType: ‘blob’

this.$axios({
          method: 'get',
          url: `/file/downloadZip`,
          responseType: 'blob'
        })

2、下载方法

dewnLoadZip(res) {
         // res 下载转blob二进制或文本数据
      let blob = new Blob([res], { type: "application/zip" });
      console.log("导出的blob", blob);
      let url = window.URL.createObjectURL(blob);
      const link = document.createElement("a"); // 创建a标签
      link.href = url;
      link.download = `下载名称`; // 重命名文件
      link.click();
      URL.revokeObjectURL(url); // 释放内存
      },