【vue 项目】调用后端返回的文件流接口报错Error，并进行文件导出

最新推荐文章于 2024-06-06 10:02:08 发布

Aohan-z

最新推荐文章于 2024-06-06 10:02:08 发布

阅读量2k

点赞数 1

分类专栏： vue项目文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/aohanzzz/article/details/128074848

版权

在Vue项目中遇到调用后端返回的文件流接口时出现Error问题，原因是响应被拦截器拦截。解决方法是根据响应头设置responseType为'blob'，然后在前端对返回的blob进行处理，转化为Excel文件并实现下载。参考了网上的解决方案，将转换过程封装到Utils工具库中。

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

做一个导出文件的需求，这是后端直接返回的文件流

虽然接口已经调通，但是前端一直报Error
在这里插入图片描述
发现这是由于响应被拦截器拦截造成的，
需要根据响应头进行判断

// 响应
service.interceptors.response.use(
  response => {
  	// 加入内容，判断响应头，导出文件格式
    const headers = response.headers
    if (headers['content-type'] === 'application/vnd.ms-excel;charset=UTF-8') {
      return response.data
    }
    // 原本判断code码，不需要改动
    const res = response.data
    if (res.code !== 200) {
      Message({
        message: res.msg || 'Error',
        type: 'error',
        duration: 5 * 1000
      })