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

关注

原创最新推荐文章于 2026-03-07 04:34:55 发布 189 阅读 AI 写同款· GEO 优化 ›

使用blob 实现 js下载word、Excel等文件我之前有写过一篇就关于vue下载文件的，那个是很好用，但那个是基于我项目中是比较合适的，但实际上，项目中还有一个方法就是使用js中Blob，这个是什么那，其实无论是fetch还是axios都有提供Blob的功能，这个就是把后端返回来的数据文本或者二进制流的数据，转换成字节，返回成一个新的blob对象，再去进行下载。代码示例： this.$api.Business.download({}, res => { // 我这个是下载的word文档，第二个参数会这样写的 cons 阅读详情

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

收录于