Vue导出Excel数据表格

这两天在做一个有关Vue框架导出Excel数据表格的项目练习，因为之前并未写过有关导出功能的练习，所以有感而发记录一下，也请各位一起共同各抒己见。（这是我第一次写博客，不足之处敬请指教）

我的情况是后端已完成相关数据筛选，并可以用swagger完成Excel表格导出，前端请求之后后端会返回乱码，这个应该是转码的原因。然后我在网上找了一下相关网友的经验分享，有篇文章感觉就是我的当下情况，（真的很抱歉，原文我找不到了，在谷歌浏览器上找历史记录发现昨天的浏览记录并未保存，真的很抱歉，如果感觉有侵权行为，原作者看到后麻烦提醒一下我立刻删除文章），然后我就按照文章的流程过了一遍，最后成功了。

我感觉最重要的代码块先分享给大家（这部分是人家写好的我是直接拿来用的）

import axios from 'axios'   //首先需要导入axios

//接下来这部分主要求是为了发送请求而进行的处理还有对文章格式的规范
export function exportMethod(data) {
    axios({
        method: data.method,
        url: `${data.url}${data.params ? '?' + data.params : ''}`,
        responseType: 'blob'
    }).then((res) => {
        const link = document.createElement('a')
        let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)

        // link.download = res.headers['content-disposition'] //下载后文件名
        link.download = data.fileName //下载的文件名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    }).catch(error => {
        this.$message.error("网络连接异常")
        console.log(error)
    })
}

代码的这部分我是单独放在了一个util.js文件夹里，并在我使用导出功能的页面引入了此文件

import { exportMethod } from "@/util";

接下来就是通过在此页面使用上述util.js里的exportMethod方法

其实使用这个exportMethod方法，在我完成之后才发现是有技巧的

 let myObj = {//封装对象
        method: "get",
        url: "/classrecordTe/ClassrecordDujiao",//请求的路径
        fileName: "（理工科组）督教",//设置导出文件名称
        params: `startTime=${this.startTime}&endTime=${this.endTime}&professionalType=${this.value}`
      };
      exportMethod(myObj);//传入对象

 这是使用这个方法最核心的代码

我感觉使用exportMethod方法最重要的就是对myObj对象的封装，而封装里最重要的就是参数的正确传递与表示，用到反引号``和${}来完成参数的拼接。

谢谢来自那位未知网友的文章，谢谢！