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') // 保存的文件名
            },

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

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐