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

最新推荐文章于 2024-09-04 10:44:39 发布

mz929

最新推荐文章于 2024-09-04 10:44:39 发布

阅读量1.6k

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/mz929/article/details/131731452

版权

文章讲述了如何在前端通过axios配置responseType为blob接收导出接口返回的二进制流，并使用file-saver库将接收到的Blob对象转换为文件进行下载。主要涉及接口交互、数据类型转换以及错误处理。

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

思路:

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

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') // 下载文件
 }