首先安装

npm i xlsx file-saver -S
npm i xlsx

 引入：

import { saveAs } from "file-saver";

// import XLSX from "xlsx";

import * as XLSX from "xlsx";

import XLSXS from "xlsx-style";

 首先我引入 import XLSX from "xlsx";报错，解决方法则是import * as XLSX from "xlsx";另外这里我安装并引用了样式，并写了相应代码。但是样式并未生效。

此时写一个按钮，按钮有一个点击事件，执行一个方法，该方法则是输出表格。

<el-button class="my-new-button-style" type="white" @click="exportExcel" size="small">
        <i class="iconfont icon-icon-new-26 button-left-class"></i>
        <span class="text">导出Excel</span>
      </el-button>

 给表格外层div加上一个id选择器：

<div class="c-table" id="tablePrint">
      <el-table class="my-new-table" border :data="Rows" height="350"
        :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column :label="item.Label" :prop="item.Prop" v-for="(item, index) in tableheadTop">
          <el-table-column :label="citem.Label" :prop="citem.Prop" :width="widthItem(item.Subs)"
            v-for="(citem, index) in item.Subs" align="center">
            <template slot-scope="scope">
              <div class="cellText" @click="() => { returnObj = scope.row[citem.Prop]; DoReverseQuery() }"> {{
                MapCount(scope.row[citem.Prop]) }}</div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>

点击输出excel执行的方法如下:

 exportExcel() {
      console.log('XLSXS',XLSXS);
      var xlsxParam = { raw: true }; // 只导出不解析
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#tablePrint"),
        xlsxParam
      );
      // 获取工作簿中的第一个工作表
      var sheet = wb.Sheets[wb.SheetNames[0]];
      // var sheet = wb.Sheets[sheetName];

      // 获取工作表中数据范围
      var range = XLSX.utils.decode_range(sheet["!ref"]);
      console.log("range", range);

        //样式部分
      for (var R = range.s.r; R <= range.e.r; ++R) {
        for (var C = range.s.c; C <= range.e.c; ++C) {
          var cell_address = XLSXS.utils.encode_cell({ r: R, c: C });
          var cell = sheet[cell_address];
          if (cell) {
            var style = cell.s || {};
            style.font = { color: { rgb: "80ff00" } };
            // console.log('XLSX.utils',XLSX.utils);
            cell.s = style
            // XLSX.utils.sheet_add_cell(sheet, { t: "s", v: cell.v, s: style, address: cell_address });
          }
        }
      }

      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "干部年龄分布.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

若需要前端输出到excel只需要把代码的 document.querySelector("#tablePrint"),表名更换为自己的表名即可.欢迎大佬们留言赐教该代码的样式未生效的原因.