element ui plus封装表格导出 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： 参考2：https://github.com/rockboom/SheetJS-docs-zh-CN