????Element-UI組件庫官網地址，點擊此處可訪問。

Vue項目整合Element-UI

????Vue項目整合Element-UI框架的步驟，Element-UI官網已經給出，主要分為以下兩種思路；

npm安裝+引入

????①npm安裝，結合webpack
????以下通過npm安裝的方式引入,Element-UI依賴庫的安裝命令為，

npm i element-ui -S

????然后可以在main.js入口文件中，執行資源引入操作。示例代碼如下，

import Vue from 'vue';
//導入Element-UI開發資源
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

//注冊
Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

CDN直接引入

????????②通過CDN，直接引入css樣式和js腳本文件，引入方式如下，可以在index.html文件中引入。

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

安裝依賴項：xlsx 和 file-saver

插件介紹

????Table組件數據導出為Excel所用到的依賴項主要是：xlsx 和 file-saver。
????其中：
????????①xlsx插件：是SheetJS 社區版提供了久經考驗的開源解決方案，用于從幾乎任何復雜的電子表格中提取有用的數據，并生成適用于傳統和現代軟件的新電子表格。
????????②file-saver插件：FileSaver.js 是在客戶端保存文件的解決方案，非常適合在客戶端生成文件的 Web 應用程序。

插件安裝

????Table組件數據導出為Excel所用到的依賴項主要是：xlsx 和 file-saver，安裝命令如下，

npm install --save xlsx file-saver

插件導入

????插件導入命令如下，

//導入依賴項
import FileSaver from "file-saver";
import XLSX from "xlsx";

插件版本問題

????插件導入之后，更新項目，可能會出現如下的警告信息，然后在使用過程中可能會出現下下面的報錯信息。應當意識到，這可能是由于插件版本不匹配造成的。

????在此，我們更換一下這兩個插件為為下列版本，親測有效。

"xlsx": "^0.16.0"
"file-saver": "^2.0.2"

文件命名問題：uuid.js

????在開發過程中，可能想要程序自動生成一個隨機字符串作為文件名稱，可以考慮使用UUID.js插件（點擊此處查看官網），安裝命令如下，

npm i uuidjs

????導入命令為，

import UUID from "uuidjs";

????自動生成文件名稱的方法為，用于創建一個16禁止的隨機字符串。

// Create a version 4 UUID as a hexadecimal string
let fileName = UUID.generate();   // fa84cf42-ffdf-4975-b42b-31ab5fb983eb

示例代碼

Vue組件：基于el-table

????組件樣式采用默認的即可，樣式可根據需要自行調整。示例代碼如下，

<template>
  <div class="wrapper">
    <el-button type="primary" @click="exportAsExcel">導出為Excel</el-button>
    <el-table id="outTable" :data="tableData" class="table" max-height="720">
      <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>
  </div>
</template>
<script>
//導入UI工具類
import { exportTableAsXLSX } from "@/utils/uiTools/uiTools";
export default {
  props: [],
  name: "mimeTable",
  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 弄",
        },
      ],
    };
  },
  methods: {
    //按鈕點擊事件
    exportAsExcel() {
      exportTableAsXLSX("outTable");
    },
  },
};
</script>
<style lang="less">
.table {
  width: 60%;
  padding: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

文件導出工具

????文件導出工具uiTools.js，只需要為exportTableAsXLSX 方法提供目標el-table組件對應的id值，即可用于將表格數據導出為excel文件。

//導入依賴項
import FileSaver from "file-saver";
import XLSX from "xlsx";
//導入uuid.js工具
import { v4 as uuidv4 } from "uuid";

/**
 * elemet-ui el-table數據導出為xlsx表格
 * @param {*} _targetId Element-UI el-table組件的id值
 */
export const exportTableAsXLSX = function(_targetId) {
    //根據table生成Book工作簿
    let wb = XLSX.utils.table_to_book(document.getElementById(_targetId));
    //將Book工作簿作為輸出
    let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
    });
    //嘗試將當前table內容保存為excel文件
    try {
        FileSaver.saveAs(
            //被導出的blob二進制對象
            new Blob([wbout], { type: "application/octet-stream" }),
            //導出文件的名稱+后綴名
            uuidv4() + ".xlsx"
        );
    } catch (e) {
        if (typeof console != "undefined") console.log(e, wbout);
    }
};

導出結果示例

????點擊“導出為Excel”按鈕，即可將el-table的表體內容導出為excel文件，并保存到本地機。