vue2和element-ui实现table表格下载为Excel文档，详细步骤

1.确保已经创建一个新项目以及安装elemenUi

2.在终端安装一下两个插件

npm install xlsx@^0.16.0 //版本过高会报错
npm install file-saver

3.在main.js中放入一下代码，设置为全局可调用

// vue中导出excel表格模板
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
// 将excel表格模板设置全局
Vue.prototype.$FileSaver = FileSaver;
Vue.prototype.$XLSX = XLSX;

4.之后就可以去页面放入一个Table表格（用element示例）

<template>
    <el-table
      id:"tableBox"   /*注意：id是用来查找到该元素，后面有用到*/
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

5.添加一个按钮，来触发转换事件，以及要处理的逻辑

  <el-button type="primary" @click="conversion">转换Excel</el-button>

在methods中写入方法

 methods: {
    conversion() {
      this.$confirm("确定要导出文件到Excel?", "导出提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      }).then(() => {
        // 获取表格元素
        const title = '转换Excel'
        let list = document.getElementById('tableBox');
        const rowData = this.keyList[i - 1]; // 获取对应的数据行
        let tables = list.cloneNode(true); //克隆此元素，否则更改数据时会影响到原表格
        //如果表格中含有switch开关，放入以下代码，可转换状态会在Excel中显示，否则转换出来为空，不会在Excel中显示
        const rows = tables.getElementsByTagName('tr');
        for (let i = 1; i < rows.length; i++) { // 从1开始，以跳过表头
          const cells = rows[i].getElementsByTagName('td');
          for (let j = 0; j < cells.length; j++) {
            const cell = cells[j];
            // 找到开关元素并获取状态
            const switchElement = cell.querySelector('input[type="checkbox"]');
            if (switchElement) {
              // 根据开关状态设置单元格内容
              cells[j].innerText = switchElement.checked ? '关闭' : '开启';
            }
            //如果表格中含有下拉框，放入以下代码，可转换为选中的选项在Excel中显示，否则转换出来为空，不会在Excel中显示
            const selectElement = cell.querySelector('.el-select');
            if (selectElement) {
              const selectedOption = selectElement.__vue__ ? selectElement.__vue__.value : null;
              const optionLabel = this.optionList.find(item => item.value === rowData.matchType)?.label || '未选择';
              cells[j].innerText = optionLabel; // 设置为对应的标签
            }
          }
        }
        //------放入以上拿到switch状态，以及下拉框代码，如果没克隆元素则会影响到原表格-------------//


        // 导出表格
        var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换
        let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
        const table_write = this.$XLSX.write(table_book, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });
        try {
          this.$FileSaver.saveAs(
            new Blob([table_write], { type: "application/octet-stream" }), `${title}.xlsx`//修改名字
          );
          //这里可以放入你的回调函数
          alert('开始下载')
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, table_write);
        }
        return table_write;

      }).catch();

    }

  },

6.这样就大功告成了，点击按钮就可以自动下载了，数据过大会有卡顿，如果有分页，只会下载当前分页

点击之后，自动下载

打开后，就出来啦

ps：如果想要在有分页的功能下转换全部的数据，

注册一个新的组件，我们将tableAll作为全部数据传递过去，在组件内监听数据，如果有变化，则去找table表格，然后执行上面的转换逻辑，这样就可以打印全部数据了，大功告成！