vue中导出excel操作

最新推荐文章于 2025-06-23 16:30:54 发布

瘦瘦的小芝芝

最新推荐文章于 2025-06-23 16:30:54 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue+element

本文链接：https://blog.youkuaiyun.com/qq_14926871/article/details/81204232

vue+element 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用Vue.js进行数据导出为Excel的方法。通过弹窗确认后，利用Export2Excel.js工具将数据列表转化为Excel文件。文章详细展示了如何配置表头、字段映射及导出文件的命名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 // 导出excel
    outExe() {
                this.$confirm('此操作将导出excel文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.excelData = this.dataList //你要导出的数据list。
                    this.export2Excel()
                }).catch(() => {
                
                });
            },
            export2Excel() {
                var that = this;
                require.ensure([], () => {
                    const { export_json_to_excel } = require('../excel/Export2Excel.js'); //这里必须使用绝对路径
                    const tHeader = ["车牌号",	"注册号",	"计费类型",	"车类型",	"入场时间",	"所属车位池",	"车库名称",]; // 导出的表头名
                    const filterVal = ['car_no','car_no','fee_type', 'car_type','entry_time','plate_pool','garage_name']; // 导出的表头字段名
                    const list = that.carlist;
                    const data = that.formatJson(filterVal, list);
                    // let time1,time2 = '';
                    // if(this.start !== '') {
                    //     time1 = that.moment(that.start).format('YYYY-MM-DD')
                    // }
                    // if(this.end !== '') {
                    //     time2 = that.moment(that.end).format('YYYY-MM-DD')
                    // }
                    console.log(export_json_to_excel);
                    export_json_to_excel(tHeader, data, `车辆管理在场车辆信息${that.totals.totalNum}条`);// 导出的表格名称，根据需要自己命名
                })
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            },

<el-button  icon="el-icon-upload" type="success" size="medium" @click="outExe()">导出EXCEL报表</el-button>