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

努力挣钱的小鑫

于 2021-10-14 10:32:00 发布

阅读量136

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript/TypeScript 文章标签： javascript 前端开发语言 ecmascript html

本文链接：https://blog.youkuaiyun.com/IAIPython/article/details/130571611

JavaScript/TypeScript 专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何在前端通过设置responseType为'blob'，获取文件名并使用downloadBlob函数下载文件。重点讲解了如何解析blob数据、生成下载链接并确保文件下载的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 下载配置，我也是参考网上的，我这个函数一般文件下载经过做公司项目测试目前是没问题。