Vue+Element表格通过前端导出为Excel文件[通俗易懂]

注：此方法能够导出多级表格，默认已安装ElementUI。

1. 安装xlsx库

npm install xlsx 

代码100分

2. 安装file-saver库

代码100分npm install file-saver

3. 编写保存函数，文件位置：src/utils/htmlToExcel.js

import FileSaver from "file-saver";
import XLSX from "xlsx";

const  htmlToExcel = {
    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;
    }
};

export default  htmlToExcel;

4. 使用函数，文件位置src/views/TablePage.vue

注:表格导出实现解释，给展示表格添加选择功能，通过handleSelectionChange函数将选中数据与selectData绑定，在选中需要导出数据后点击导出按钮，展示el-dialog并将selectData数据展示在el-dialog中的表格，此表格为最后导出的表格，所以id赋值selectTable，最后确认打印调用exportExcel函数，通过htmlToExcel.getExcel(‘#selectTable’,’导出的自定义标题’)导出Excel文件。

代码100分<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>

本文演示视频：点击浏览

更多前端内容欢迎关注公众号：天小天个人网