Vue-element-ui 导出Excel表

旧城等待， 2023-01-12 11:48 216阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  Vue+Element表格通过前端导出为Excel文件
 *   *  1.安装xlsx库
     *  2.安装file-saver库
     *  3.编写保存函数，文件位置：src/utils/htmlToExcel.js
     *  4.在表格中使用函数，文件位置src/views/TablePage.vue
 *  总结

--------------------

# Vue+Element表格通过前端导出为Excel文件 #

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

## 1.安装xlsx库 ##

npm install xlsx

## 2.安装file-saver库 ##

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文件。

<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>

# 总结 #

导出Excel表 4步骤  
1.npm install xlsx  
2.npm install file-saver  
3.编写函数htmlToExcel.js(导出Excle函数)  
4.dom这里应该给与的是 el-table id=“selectTable”