excle导出的方法封装

1.  封装js文件，复制以下代码到js文件，如exportExcle.js

// 获取当前时间，这里我要导出的文件名称要用到，具体用或不用看需求情况
import { getNowTime } from "@/utils/common";
// element-UI的组件
import { Notification, MessageBox, Message, Loading } from 'element-ui'


let downloadLoadingInstance;

//res:接口返回的数据，name:导出文件的名称
export function exsuccess(res, name) {
// element-ui加载组件
    downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
    let blob = new Blob([res], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    });
    let url = window.URL.createObjectURL(blob);
    let a = document.createElement("a");
    a.href = url;
// 导出文件的名称以及文件的格式
    a.download = `${name}${getNowTime()}.xlsx`;
    a.click();
    window.URL.revokeObjectURL(url);
// element-ui消息弹窗组件
    Message({ message: `${name}导出成功`, type: 'success' })
// element-ui成功后关闭加载组件
    downloadLoadingInstance.close();
}

2. 将封装好的组件方法引用到用到的VUE文件中 

//1. 引入
import { testExportApi } from "@/api/material/API/API";
import { exsuccess } from "@/utils/exportExcel";

//2. 在methods中写入事件并且引用引入的导出方法
  methods: {
    // 以下是导出的事件方法
    exportData() {
       //封装的导出接口
      testExportApi().then((res) => {
          // 封装的导出方法
          exsuccess(res, "文件名字");
        })
        .catch((err) => {
          console.log(err);
        });
    },
}

3. 注意： 封装的接口上要加上     responseType: "blob"  如下：

// 导出接口
export function testExportApi(data) {
    return request({
        url: '/Api/Api/testExportApi',
        method: 'post',
        data: data,
        // 一定要加上这行代码
        responseType: "blob"
    })
}