当前位置:首页 » 《关注互联网》 » 正文

解决axios请求文件流前端通过new Blob完成文件流下载文件打不开

19 人参与  2024年03月23日 10:05  分类 : 《关注互联网》  评论

点击全文阅读


目录

1.首先请求封装axios的请求方式

2.根据接口文档查看文件流的请求类型

3.请求Methods

4.以上写完以后,好消息是文件可以成功下载

4.1坏消息是文件竟然是个损坏文件打不开,修复了也是乱码

5.解决问题

5.1 前端做文件下载有很多方式,前端返回文件流需要我们在axios请求封装新增一个文件下载请求,专门处理Blob文件流的请求,其中 responseType:"blob" 类型必须写


1.首先请求封装axios的请求方式

const service = axios.create({  baseURL:"" ,  timeout: 5000})export const http ={  get<T>(url: string, params: any):Promise<T> {    return request({      url,      method: 'get',      params    })  },  postJson<T>(url: string, data: any):Promise<T> {    return request({      url,      method: 'post',      headers: { 'Content-Type': 'application/json' },      data    })  }}

2.根据接口文档查看文件流的请求类型

这边两种请求方式都有,以下按照post为例子

请求api模块  "@/api/download"

3.请求Methods

import { postDownload } from "@/api/download"// 导出事件const ExportMethods = () => {    // 1.ts类型规范返回的结果为Blob类型    const res: Blob = await postDownload()      // 2.文件流存在,创建下载路径触发下载    if (res) {       const blob = new Blob([res], { type: 'application/vnd.ms-excel; charset=utf-8' })      const link = document.createElement('a')      link.href = URL.createObjectURL(blob)      link.download ='Excel.xlsx'      link.click()      // 3.一定要释放URL对象      URL.revokeObjectURL(link.href)    }  })}

4.以上写完以后,好消息是文件可以成功下载

4.1坏消息是文件竟然是个损坏文件打不开,修复了也是乱码

5.解决问题

5.1 前端做文件下载有很多方式,前端返回文件流需要我们在axios请求封装新增一个文件下载请求,专门处理Blob文件流的请求,其中 responseType:"blob" 类型必须写

const http ={  // 导出blob文件流  downloadBlobFile<T>(url: string, data: any):Promise<T> {    return request({      url,      method: 'post',      data,      responseType: 'blob'  // 此类型必须标注,否则下载的文件就是损坏的    })  }}

修改api的请求函数

组件中使用方法不变,再次导出发现解决问题

对你有帮助的话,点个赞呗


点击全文阅读


本文链接:http://zhangshiyu.com/post/84086.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1