vue 怎么接收后端传过来的 excel文件流

vue 怎么接收后端传过来的 excel文件流

1.首先需要修改接口的的发送方式

 'responseType': "arraybuffer" 

 

2.在公共js里新建一个方法

import {  parseTime} from './index';  // 这是是一个格式化时间的方法。可以删除
export function export_excel_file(export_data, list_name) {
  let link = document.createElement("a");
  //    type就是blob的type,是MIME类型的，可以自己查看MIME类型都有哪些
  let blogw = new Blob([export_data], {
    type: "application/vnd.ms-excel;charset=utf-8"
  })
  let objectUrl = window.URL.createObjectURL(blogw); //创建一个新的url对象
  link.href = objectUrl;
  let file_name = `${parseTime(new Date())}的${list_name}列表.xlsx`; // 文件名的输出方式，随意就好
  link.download = file_name; //  下载的时候自定义的文件名
  link.click();
  window.URL.revokeObjectURL(objectUrl); //为了更好地性能和内存使用状况，应该在适当的时候释放url.

}

 

3.调用接口时，直接把文档流数据放到方法 里

 import { export_excel_file } from '@/utils/export'; 

　　　　

// 导出按钮
    exportBtn() {if (this.multipleSelection.length) {
        importTrace({
          list: this.multipleSelection, // 传入数组
        })
          .then((res) => {
            export_excel_file(res, '文件名 ');
            this.$message.success('导出成功');
          })
          .catch(() => {this.$message.error('导出失败，请稍后再试');
          });
      } else {
        this.$message.warning('请选择需要导出数据');
      }
    },

 

如有响应拦截器的情况：

后端是用流的形式，所以返回前端没有 code ，会被响应拦截器拦截。能不能给这个接口设置白名单呢？（能不能放行这个响应呢？）

 

查看上面的图1，由于我们修改了接口的接口方式，我们发送的方式就会方式改变。

 

 

我们可以看到 response 的 config 里有不一样的发送方式，我们只要判断这个响应方式即可。

 

 

以上是全部内容。