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

Vue項目整合Element-UI

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

npm安裝+引入

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

npm i element-ui -S

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

import Vue from 'vue';
//導(dǎo)入Element-UI開發(fā)資源
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組件數(shù)據(jù)導(dǎo)出為Excel所用到的依賴項主要是：xlsx 和 file-saver。
????其中：
????????①xlsx插件：是SheetJS 社區(qū)版提供了久經(jīng)考驗的開源解決方案，用于從幾乎任何復(fù)雜的電子表格中提取有用的數(shù)據(jù)，并生成適用于傳統(tǒng)和現(xiàn)代軟件的新電子表格。
????????②file-saver插件：FileSaver.js 是在客戶端保存文件的解決方案，非常適合在客戶端生成文件的 Web 應(yīng)用程序。

插件安裝

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

npm install --save xlsx file-saver

插件導(dǎo)入

????插件導(dǎo)入命令如下，

//導(dǎo)入依賴項
import FileSaver from "file-saver";
import XLSX from "xlsx";

插件版本問題

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

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

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

文件命名問題：uuid.js

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

npm i uuidjs

????導(dǎo)入命令為，

import UUID from "uuidjs";

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

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

示例代碼

Vue組件：基于el-table

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

<template>
  <div class="wrapper">
    <el-button type="primary" @click="exportAsExcel">導(dǎo)出為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>
//導(dǎo)入UI工具類
import { exportTableAsXLSX } from "@/utils/uiTools/uiTools";
export default {
  props: [],
  name: "mimeTable",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 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>

文件導(dǎo)出工具

????文件導(dǎo)出工具uiTools.js，只需要為exportTableAsXLSX 方法提供目標el-table組件對應(yīng)的id值，即可用于將表格數(shù)據(jù)導(dǎo)出為excel文件。

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

/**
 * elemet-ui el-table數(shù)據(jù)導(dǎo)出為xlsx表格
 * @param {*} _targetId Element-UI el-table組件的id值
 */
export const exportTableAsXLSX = function(_targetId) {
    //根據(jù)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內(nèi)容保存為excel文件
    try {
        FileSaver.saveAs(
            //被導(dǎo)出的blob二進制對象
            new Blob([wbout], { type: "application/octet-stream" }),
            //導(dǎo)出文件的名稱+后綴名
            uuidv4() + ".xlsx"
        );
    } catch (e) {
        if (typeof console != "undefined") console.log(e, wbout);
    }
};

導(dǎo)出結(jié)果示例

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