【JavaScript】下载文件 Blob 流数据函数封装和使用

1.请求设置请配置 responseType: 'blob'

export function xxx(id) {
  return request({
    url: `xxx?id=${id}`,
    method: 'get',
    responseType: 'blob'
  })
}

2.通过 res.headers['content-disposition'] 获取文件名，也可以自定义，记得加上 .后缀

const filename = res.headers['content-disposition'].split('=')[2].replace(/['\']/g, '').split('"')[1] 
// 具体根据你后台返回的数据获取，不固定

3.下载，将获取到的 blob 流数据和 filename 传入就可以了

/**
 * 下载 blob 流数据
 * @param {*} data 流数据
 * @param {*} fileName
 */
export function downloadBlob(data, fileName) {
  // 1.解析 blob 数据 生成 url
  const blob = new Blob([data])
  const url = window.URL.createObjectURL(blob)
  // 2.创建下载链接+自动下载
  const link = document.createElement('a')
  link.href = url
  link.download = fileName
  document.body.appendChild(link)
  link.click()
  window.URL.revokeObjectURL(link)
}

大家可以参考网上更详细的的 blob 下载配置，我也是参考网上的，我这个函数一般文件下载经过做公司项目测试目前是没问题。