vue 使用xlsx导出功能(及其选择导出,条件导出,部分字段导出)

最新推荐文章于 2025-03-26 15:35:50 发布

太阳姐姐

最新推荐文章于 2025-03-26 15:35:50 发布

阅读量9.3k

点赞数 9

分类专栏： vue vue3.0 文章标签： html5

本文链接：https://blog.csdn.net/weixin_45502613/article/details/109745994

版权

vue 同时被 2 个专栏收录

16 篇文章

订阅专栏

10 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用xlsx插件实现数据导出功能，包括选择性导出、条件导出和部分字段导出，详细讲解了从下载插件到在main.js配置，再到vue组件中具体使用的步骤。

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

1.下载xlsx插件

npm install --save xlsx

2.main.js中使用

import XLSX from 'xlsx'
Vue.prototype.XLSX = XLSX```

3.vue页面中使用
在这里插入图片描述

   <el-button type="success" @click="exportExcel" size="small" icon="el-icon-upload2">导出</el-button>

  exportExcel() {
                let list = [];
                if (this.selectRows.length>0){ //如图我选择了导出那几条数据则导出我需要导出的数据（this.selectRows表示我选中导出数据的数组）
                    list =this.selectRows  //选择导出部分代码
                    this.exportList(list);
                } else {//如果木有选择则导出全部数据
                    console.log(this.selectRows)
                    this.axios
                        .get("/sec/secVisitorRegister/list?isPage=false", {params: this.params})
                        .then(res => {
                            console.log(res.data.data);
                            list = res.data.data; //导出全部代码或条件查询出来的代码
                            this.exportList(list);
                        });
                }


            },
            exportList(list){
                let tableData = [
                    ['序号','姓名', '联系电话','来访时间', '同行人数',"单位或住址","来访目的","备注"]//导出表头
                ] // 表格表头
                list.forEach ((item,index)=> {
                    let rowData = []
                    //导出内容的字段
                    rowData = [
                        index+1,
                        item.name,
                        item.phone,
                        item.registerTime,
                        item.numberPeople,
                        item.address,
                        item.purpose,
                        item.memo,
                    ]
                    tableData.push(rowData)
                })
                let ws = this.XLSX.utils.aoa_to_sheet(tableData)
                let wb = this.XLSX.utils.book_new()
                this.XLSX.utils.book_append_sheet(wb, ws, '来访记录') // 工作簿名称
                this.XLSX.writeFile(wb, '来访记录.xlsx') // 保存的文件名
            },

导出数据图例
在这里插入图片描述