Vue+Element表格通過前端導出為Excel文件

在做一個帶出Excel功能，本來想的是后端導出，但是表格格式比較復雜，涉及到合並現實這些操作 需要跟前端保持一致，所以就在網上找了下前端導出的插件。
以下做個記錄
注：此方法能夠導出多級表格，默認已安裝ElementUI。
1。安裝xlsx庫
npm install xlsx
2。編寫保存函數，文件位置：src/utils/htmlToExcel.js

import XLSX from 'xlsx';

const htmlToExcel = {
  getExcel(dom, title = 'temp'){
    var excelTitle = title;
    var wb = XLSX.utils.table_to_book(document.querySelector(dom));
    try {
      XLSX.writeFile(wb, excelTitle + '.xlsx');
    } catch (e) {
      if (typeof console !== 'undefined') {
        console.log(e);
        alert('導出失敗!');
        // console.log(e, wbout);
      }
    }
    // return wbout;
  },
};

export default htmlToExcel;

3.使用函數，文件位置src/views/TablePage.vue

注:表格導出實現解釋，給展示表格添加選擇功能，通過handleSelectionChange函數將選中數據與selectData綁定，在選中需要導出數據后點擊導出按鈕，展示el-dialog並將selectData數據展示在el-dialog中的表格，此表格為最后導出的表格，所以id賦值selectTable，最后確認打印調用exportExcel函數，通過htmlToExcel.getExcel('#selectTable','導出的自定義標題')導出Excel文件。

<template>
    <div>
        <!--導出按鈕-->
        <el-button type="primary" style="margin:20px;" @click="exportExcelSelect">導出Excel</el-button>
        <!--原始表格-->
        <el-table
            :data="tableData"
            @selection-change="handleSelectionChange"
        >
            <el-table-column
               type="selection"
            >
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="日期"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
            >
            </el-table-column>
            <el-table-column label="詳細地址">
                <el-table-column
                        prop="province"
                        label="省份"
                >
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="市區"
                >
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址"
                >
                </el-table-column>
                <el-table-column
                        prop="zip"
                        label="郵編"
                >
                </el-table-column>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
            >
                <template>
                    <el-button type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">編輯</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--預覽彈窗表格-->
        <el-dialog title="表格保存預覽" width="70%" :visible.sync="selectWindow">
            <el-table :data="selectData" id="selectTable" height="380px">
                <el-table-column
                        prop="date"
                        label="日期"
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                >
                </el-table-column>
                <el-table-column label="詳細地址">
                    <el-table-column
                            prop="province"
                            label="省份"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="city"
                            label="市區"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="zip"
                            label="郵編"
                    >
                    </el-table-column>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="exportExcel">確定保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import htmlToExcel from '@/utils/htmlToExcel'
    export default {
        name: "ExcelPage",
        data(){
            return{
                //表格數據
                tableData: [
                    {
                        date: '2016-05-03',
                        name: '王小天',
                        province: '上海',
                        city: '普陀區',
                        address: '上海市普陀區金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-02',
                        name: '王小明',
                        province: '上海',
                        city: '普陀區',
                        address: '上海市普陀區金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-04',
                        name: '王小智',
                        province: '上海',
                        city: '普陀區',
                        address: '上海市普陀區金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-01',
                        name: '王小紅',
                        province: '上海',
                        city: '普陀區',
                        address: '上海市普陀區金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-08',
                        name: '王小華',
                        province: '上海',
                        city: '普陀區',
                        address: '上海市普陀區金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-06',
                        name: '王小麗',
                        province: '上海',
                        city: '普陀區',
                        address: '上海市普陀區金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-07',
                        name: '王小花',
                        province: '上海',
                        city: '普陀區',
                        address: '上海市普陀區金沙江路 1518 弄',
                        zip: 200333
                    }
                ],
                //表格中選中的數據
                selectData:[],
                selectWindow:false,
            }
        },
        methods:{
            //導出
            exportExcel() {
                htmlToExcel.getExcel('#selectTable','導出的自定義標題')
            },
            //顯示預覽彈窗
            exportExcelSelect(){
                if (this.selectData.length < 1){
                    this.$message.error('請選擇要導出的內容！');
                    return false;
                }
                this.selectWindow = true;
            },
            //選中數據
            handleSelectionChange(val) {
                this.selectData = val;
            }
        }
    }
</script>

<style scoped>
</style>

因為這個是按照element ui里的表格導出，所以如果要過濾不必要的字段，可以再加一層數據篩選，然后導出篩選過后的表格

參考1：https://juejin.cn/post/6914824008043069448
參考2：https://github.com/rockboom/SheetJS-docs-zh-CN