vue 调用接口下载java后端生成的excel文件流

vue 调用接口下载java后端生成的excel文件流

需求是点击导出（下载）excel文件
分析： 下载可借用a标签的下载功能，将后端返回的文件流处理后，动态生成a标签模拟点击操作完成下载操作

首先创建axios请求

import axios from 'axios';

const excel = axios.create({
  timeout: 50000, // 请求超时时间
  withCredentials: true //跨域处理
})
在请求拦截器里配置token等参数，设置responseType 为‘blob’
excel.interceptors.request.use(config => {
const token = sessionStorage.getItem('token');
  if (token) {
    config.headers.Authorization = 'xxxx' + token // 让每个请求携带自定义 token 请根据实际情况自行修改
  }
  config.responseType = 'blob'
  return config
}, err)

在api文件中定义接口请求

import excel from './excelApi'
// 假设接口地址为 excel/exportExcel
export const exportExcel = (params) => {
    return excel.post(baseUrl + `excel/exportExcel`, params)  
};

对应的组件引入接口文件调用

import { exportExcel } from "@/api/api";

exportExcel() {
      let param = {
        params: {
          // 请求条件
        },
      };
      exportExcel(param).then( res => {
        if (res.data.type) {
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          let link = document.createElement('a');
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob);
          link.setAttribute('download', '导出excel文件.xlsx');
          link.click();
          link = null;
          this.$message.success('导出成功');
        } else {
          this.$message.warning(res.data.msg);
        }
      })
      .catch(err => {
        this.$message.error("下载失败");
      })
    },

完事