方式一：使用xlsx插件

1. 在项目中引入xlsx插件：npm install xlsx -S
2. 点击项目中的“导出”按钮，调用我们自己定义的方法
3. 原文地址：(vue2.x 实现纯前端导出excel - 掘金 (juejin.cn))

   import excel from '@/utils/ExportExcel';
   
   handleExport() {
    const params = {
      title: [''],       // 导出的表格内容标题
      key: [''],         // 将data数据中的key提取到一个数组中
      data: [],          // 表格数据，每条数据定义成一个对象，将所有对象存储到一个数组中形成一个数据集合
      autoWidth: true, //列的宽度会适应最长的列的宽度
      filename: '进行保存的文件名',
    };
    excel.exportArrayToExcel(params);
  }

    // src/utils/ExportExcel.ts文件
    import * as XLSX from 'xlsx';

    function autoWidthFunc(ws: any, data: any) {
      // 遍历表格单元，获得与表格单元内容匹配的长度数据
      const colWidth = data.map((row: any) =>
        row.map((val: any) => {
          //检测字符串是否包含汉字
          const reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g'); 
          if (val == null) {
            return { wch: 10 };
          } else if (reg.test(val)) {
            return { wch: val.toString().length * 2 };
          } else {
            return { wch: val.toString().length };
          }
        })
      );
      // 如果表格中每列有比表头长的数据，就以该数据为长度基准，否则以表头长度为基准
      const result = colWidth[0];
      for (let i = 1; i < colWidth.length; i++) {
        for (let j = 0; j < colWidth[i].length; j++) {
          if (result[j].wch < colWidth[i][j].wch) {
            result[j].wch = colWidth[i][j].wch;
          }
        }
      }
      // 将最终结果告诉给sheet表
      ws['!cols'] = result;
    }

    function jsonToArray(key: any, jsonData: any) {
      return jsonData.map((v: any) =>
        key.map((j: any) => {
          return v[j];
        })
      );
    }

    const exportArrayToExcel = ({ key, data, title, filename, autoWidth }: any) => {
      // 创建一个excel文件的工作簿WorkBook 
      const wb = XLSX.utils.book_new();
      // 将表格数据(对象数组)转换成二维数组数据
      const arr = jsonToArray(key, data);
      // 将表格标题添加到表格数据的顶部
      arr.unshift(title);
      // 创建一个sheet表并传递表格数据
      const ws = XLSX.utils.aoa_to_sheet(arr);
      if (autoWidth) {
        // 表格宽度自适应
        autoWidthFunc(ws, arr);
      }
      // 将sheet表添加到工作簿中，并给工作簿命名
      XLSX.utils.book_append_sheet(wb, ws, filename);
      // 开始写并下载文件
      XLSX.writeFile(wb, filename + '.xlsx');
    };

    export default {
      exportArrayToExcel,
    };

方式二：使用vue-json-excel插件

1. 安装插件：npm install vue-json-excel -S
2. 在main.js中引入
3. 原文地址：vue导出excel表格（详细教程）_vue前端导出excel表格_前端小脑虎的博客-CSDN博客

import JsonExcel from 'vue-json-excel'
// 将插件定义成全局组件
Vue.component('downloadExcel', JsonExcel)

3. 将“导出”按钮包裹在上述的全局组件中
   • data：表格数据
   • fields: 表头数据（是个对象，相当于上述的key和title的结合体）
   • header: 表格标题（一般没有）
   • name: 下载的文件名

    //html
    <download-excel 
    :data="data" 
    :fields="filelds" 
    :header="title" 
    :name="保存下载的文件名">
        <el-button>导出</el-button>
    </download-excel>
    
    //js
    data: [
        {
            name:'张三',
            age: '18'
        },
         {
            name:'李四',
            age: '20'
        },
        {
            name:'王五',
            age:'17'
        }
    ]
    fields: {
        name:'姓名',
        age:'年龄'
    }
    

方式三：使用xlsx和file-saver

1. 安装插件
   • npm install xlsx -S
   • npm instlal file-saver -S
2. 引入插件
   • import * as XLSX from 'xlsx'
   • import FileSaver from 'file-saver'

    // 1. 使用表格数据创建sheet
    const jsonWorkSheet = xlsx.utils.json_to_sheet(array);
    // 创建workbook
    const workBook: WorkBook = { 
        // sheet名称数组，一张工作簿可以存在多个sheet工作表
        SheetNames: ['sheet名称'], 
        // sheet数据对象
        Sheets: {
            ['sheet名称']: jsonWorkSheet, 
        } 
    };
    // 2. 使用表格dom直接创建workBook
    const workBook = XLSX.utils.table_to_book(document.querySelector(".table"));
    
    
    // 给workbook添加配置项
    const wb = XLSX.write(workBook,{
        bookType: "xlsx",
        bookSST: true, 
        type: "array"
    })
    // 1. 用xlsx方法写并保存文件
    XLSX.writeFile(workBook, '文件名');
    // 2. 用file-saver提供的方法写并保存文件
    FileSaver.saveAs( 
    new Blob([wb], { type: 'application/octet-stream', }), '文件名.xlsx', 
    );