vue + element 表格数据导出为excel表格

由于业务内容的需要，我们有时候需要将表格中的数据做导出，生成一个excel表格，以下操作主要实现将element中的table数据生成一个excel表格并做下载操作。

效果图如下：

 点击图中导出按钮时，将表格中的数据导出为一个excel文件并下载。

如下

 操作步骤如下：

1.下载相应的依赖 （命令如下）

npm install --save xlsx file-saver

2.下载完成后引入相应的插件

        1.import FileSaver from "file-saver";

        2.import * as XLSX from "xlsx";

3.在相关页面引入代码后定义方法

exportExcel() {
    //转换成excel时，使用原始的格式
    var xlsxParam = { raw: true };
    let fix = document.querySelector(".el-table__fixed");
    let wb;
    //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
    if (fix) {
        wb = XLSX.utils.table_to_book(
        document.querySelector("#tableId").removeChild(fix),xlsxParam);
        document.querySelector("#tableId").appendChild(fix);
    } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#tableId"),xlsxParam);
    }
    var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
    });
    try {
        FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),"导出详情单.xlsx"); 
    } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
        }
    return wbout;
},

4.给el-table中定义一个id

<el-table
    :data="tableData"
    id="tableId"
    style="width: 100%">
</el-table>
步骤基本完成，运行项目后点击导出按钮便可实现表格数据下载导出为excel表。

完整代码如下

<template>
    <div class="administrativeCase-container">
        <div class="content-box">
            <div class="box-btn">
                <div class="btn">
                    <div>
                        <el-button type="primary">导入</el-button>
                        <el-button @click="exportExcel()">导出</el-button>
                    </div>
                </div>
            </div>
            <div class="box-content">
                <el-table
                      :data="tableData"
                      id="tableId"
                      style="width: 100%">
                      <el-table-column
                        prop="date"
                        label="日期"
                        fixed
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="name"
                        label="姓名"
                        fixed
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="address"
                        label="地址">
                      </el-table-column>
                      <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-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>
        </div>
    </div>
</template>
 
<script>
    import FileSaver from "file-saver";
    import * as XLSX from "xlsx";
    export default {
        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:{
            // 导出
            exportExcel() {
                //转换成excel时，使用原始的格式
                var xlsxParam = { raw: true };
                let fix = document.querySelector(".el-table__fixed");
                let wb;
                //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
                if (fix) {
                  wb = XLSX.utils.table_to_book(
                  document.querySelector("#tableId").removeChild(fix),xlsxParam
                  );
                  document.querySelector("#tableId").appendChild(fix);
                } else {
                  wb = XLSX.utils.table_to_book(document.querySelector("#tableId"),xlsxParam);
                }
                var wbout = XLSX.write(wb, {
                bookType: "xlsx",
                bookSST: true,
                type: "array",
                });
                try {
                FileSaver.saveAs(
                    new Blob([wbout], { type: "application/octet-stream" }),
                    "导出详情单.xlsx"
                ); //文件名
                } catch (e) {
                if (typeof console !== "undefined") console.log(e, wbout);
                }
                return wbout;
            },
        }
    }
</script>
 
<style>
 
</style>