怎么通过blob的方式下载文件

关注

最新推荐文章于 2026-08-14 14:50:11 发布 · 2.1k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

Blob对象实现文件下载 Blob对象实现文件下载说明一、Blob对象二、前端三、后端说明更新时间：2021/1/7 16:37，更新完基本内容最近遇到一个需求，文件下载，但需要鉴权，这就意味着不能用后台返回下载链接的方式进行下载，因为一旦被别人拿到这条链接，就可以不需要任何权限就直接下载，因此需要换种思路，在一番百度之后，了解到了blob对象，这就是本文要讲的内容注意：本文仅为记录学习轨迹，如有侵权,联系删除一、Blob对象 Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也阅读详情

思路:

导出的接口返回的是二进制流

axios配置responseType为blob接收二进制流文件为Blob格式

安装file-saver包，实现下载Blob文件 yarn add file-saver

导出的接口的数据类型

export function xxx() {
  return request({
    url: 'xxx',
    // 改变接收数据的类型
    responseType: 'blob' // 使用blob接收二进制文件流
  })
}

改造响应拦截器

判断是不是blob类型，如果是直接返回数据，不再进行解构

// 响应拦截器
service.interceptors.response.use((response) => {
  // axios默认包裹了data
  // 判断是不是Blob
  if (response.data instanceof Blob) return response.data // 返回了Blob对象
  const { data, message, success } = response.data // 默认json格式
  if (success) {
    return data
  } else {
    Message({ type: 'error', message })
    return Promise.reject(new Error(message))
  }
},

安装file-saver

$ npm i file-saver
$ yarn add file-saver

点击按钮调用接口

使用file-saver将blob转化成文件下载

<el-button size="mini" @click="exportEmployee">excel导出</el-button>
 import FileSaver from 'file-saver'
 import { xxxx} from '@/api/employee'
  async  xxxxx() {
      const result = await xxxx() // 导出
      // console.log(result) // 使用一个npm包 直接将blob文件下载到本地 file-saver
      // FileSaver.saveAs(blob对象,文件名称)
      FileSaver.saveAs(result, 'xxx表.xlsx') // 下载文件
 }