结合vue+Element UI导出table数据，生成XLSX文件

首先，需要在一个没任何错误，可以成功启动的vue项目中

表格的导出

1. 安装xlsx库

npm install xlsx --save

2. file-saver

npm install file-saver --save

3. 编写函数---新建exportsExcel.js文件

//将包导入
import FileSaver from "file-saver";
import XLSX from "xlsx";

export function getExcel(dom, title) {
    var excelTitle = title;
    var wb = XLSX.utils.table_to_book(document.querySelector(dom))
    //  获取二进制字符串作为输出
    var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
    })
    try {
        FileSaver.saveAs(new Blob([wbout], {
                type: 'application/octet-stream'
            }), excelTitle +
            '.xlsx')
    } catch (e) {
        if (typeof console !== 'undefined') {
            console.log(e, wbout)
        }

    }
    return wbout
}

4. 使用函数---创建exports.vue文件

<!-- 组件都是element ui中的组件-->
<template>
    <div>
        <el-button type="info" 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
            :data="tableData"
            :row-key="getRowKeys"
            @selection-change="handleSelectionChange">
            <el-table-column
             :reserve-selection="true"
               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>
        <el-dialog title="表格保存预览" width="70%" :visible.sync="tableSavePreview">
            <el-table :data="multipleSelection" 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 getExcel from '存放exportsExcel.js文件的路径'
    export default {
        name: "ExcelPage",
        data(){
            return{
                tableData: [
                   {
                        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
                    }
                ],
                multipleSelection: [],
                tableSavePreview:false,
            }
        },
        methods:{
            //当数据为后端请求，形成分页后，组件实现分页记忆选中
            getRowKeys(row) {
             return row.id;
            },
            exportExcel() {
              getExcel('#selectTable','导出的自定义标题')
            },
            exportExcelSelect(){
                if (this.multipleSelection.length < 1){
                    this.$message.error('请选择要导出的内容！');
                    return false;
                }
                this.tableSavePreview = true;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        }
    }
</script>

注：有不当之处还请谅解，欢迎交流