vue 导出excel 后端返回blob数据流

发布时间 2023-11-22 16:56:50作者: 飞天龙猫

后端返回blob数据流,前端进行下载

封装公共ts组件downloadExcel.ts

/*
* created by seven.lau on 22/11/2023
* 导出excel
* 后端返回Blob数据流
* url 接口地址
* paramsData 接口参数
* filename 导出excel的文件名
* */
import axios from 'axios';
const downloadExcel = function (url, paramsData) {
  axios({
    method: 'post',
    url: url,
    data: paramsData,
    responseType: 'blob'
  }).then((res) => {
    console.log('res----------', res);
    const str = res.headers['content-disposition'].split(';')[1].split('=')[1];
    const filename = decodeURIComponent(str);
    const blob = new Blob([res.data], {
      type: 'app;ication/vnd.ms-excel',
    });
    const objectUrl = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.setAttribute('href', objectUrl);
    a.setAttribute('download', filename);
    a.click();
    window.URL.revokeObjectURL(objectUrl);
  }).catch(error => {
    console.log(error);
  });
}
export default downloadExcel

在需要的页面引入方法

调用方法

文件导出后如图