vue3+ts文件流导出xlsx表格需要token

Grocery store owner

于 2024-09-03 17:08:23 发布

阅读量97

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/no_one_but_you/article/details/141866453

版权

封装方法post请求

import { ElLoading } from 'element-plus';
import axios from 'axios';
export const exportFilePost = (params: any) => {
    const loadingInstance = ElLoading.service({
      background: 'rgba(255, 255, 255, 0)',
    });
    axios.post(params.url, params.data, {
      headers: {
        Authorization: 'Bearer ' + sessionStorage.getItem('token')
      },
      responseType: 'blob',
    }).then((res: any) => {
      const blob = new Blob([res.data]);
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = params.title;
      a.click();
      window.URL.revokeObjectURL(url);
      loadingInstance.close();
      ElMessage({
        type: 'success',
        message: '导出成功',
      });
    }).catch((err: any) => {
      ElMessage({
        type: 'error',
        message: err,
      });
      loadingInstance.close();
    })
  }

封装方法get请求

import { ElLoading } from 'element-plus';
import axios from 'axios';
export const exportFileGet = (params: any) => {
  const loadingInstance = ElLoading.service({
    background: 'rgba(255, 255, 255, 0)',
  });
  axios.get(params.url, {
    params: params.data,
    headers: {
      Authorization: 'Bearer ' + sessionStorage.getItem('token')
    },
    responseType: 'blob',
  }).then((res) => {
    const blob = new Blob([res.data]);
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = params.title;
    a.click();
    window.URL.revokeObjectURL(url);
    loadingInstance.close();
    ElMessage({
      type: 'success',
      message: '导出成功',
    });
  }).catch((err) => {
    ElMessage({
      type: 'error',
      message: err,
    });
    loadingInstance.close();
  })
}

使用（get方法导出与post导出使用一致）

// 引入方法
import { exportFilePost } from '../../utils/index'

// 导出
const exportTabItem = () => {
    const data = {
        url: '/test/exportXLSX',
        data: {},
        title: '测试导出' + '.xlsx',
    }
    downloadFilePost(data)
}