ElementUI导出表格数据为Excel文件

将列表的数据导出成excel文件是管理系统中非常常见的功能。最近正好用到了ElementUI&＃43;Vue的组合做了个导出效果&＃xff0c;拿出来分享一下&＃xff0c;希望可以帮到大家&＃xff1a;&＃xff09;

1.定义导出按钮

<el-button &＃64;click&＃61;"exportData" type&＃61;"success" icon&＃61;"el-icon-download">导出数据el-button>


2.定义导出方法

这里提供了2种方式导出&＃xff0c;请根据需要自选。

// 导出数据exportData() {this.$http({method: "GET",url: "student/export",params: {},responseType: "blob"}).then(res &＃61;> {/* 方式1&＃xff0c;文件名随机let blob &＃61; new Blob([res.data], { type: "application/vnd.ms-excel" });let url &＃61; window.URL.createObjectURL(blob);window.location.href &＃61; url;*//* 方式2&＃xff0c;支持IE10&＃xff1b;文件名自定义*/let blob &＃61; new Blob([res.data], { type: "application/vnd.ms-excel" }); // 将服务端返回的文件流&＃xff08;二进制&＃xff09;excel文件转化为bloblet fileName &＃61; "学生列表.xls";if (window.navigator && window.navigator.msSaveOrOpenBlob) {// IEwindow.navigator.msSaveOrOpenBlob(blob, fileName);} else {let objectUrl &＃61; (window.URL || window.webkitURL).createObjectURL(blob);let downFile &＃61; document.createElement("a");downFile.style.display &＃61; "none";downFile.href &＃61; objectUrl;downFile.download &＃61; fileName; // 下载后文件名document.body.appendChild(downFile);downFile.click();document.body.removeChild(downFile); // 下载完成移除元素// window.location.href &＃61; objectUrlwindow.URL.revokeObjectURL(objectUrl); // 只要映射存在&＃xff0c;Blob就不能进行垃圾回收&＃xff0c;因此一旦不再需要引用&＃xff0c;就必须小心撤销URL&＃xff0c;释放掉blob对象。}}).catch(err &＃61;> {console.log(err);});},


3.定义导出接口

此处以springboot接口为例

/*** 导出* &＃64;param response* &＃64;throws Exception*/&＃64;GetMapping("/export")public void export(HttpServletResponse response) throws Exception{// 创建工作簿HSSFWorkbook workbook &＃61; new HSSFWorkbook();// 创建sheetHSSFSheet sheet &＃61; workbook.createSheet("sheet1");String fileName &＃61; "学生列表.xls"; // 设置要导出的文件的名字// 获取数据集合List<Student> list &＃61; studentService.list(null);// 生成标题行HSSFRow row &＃61; sheet.createRow(0);row.createCell(0).setCellValue("序号");row.createCell(1).setCellValue("学号");row.createCell(2).setCellValue("姓名");row.createCell(3).setCellValue("性别");row.createCell(4).setCellValue("身份证");row.createCell(5).setCellValue("联系方式");row.createCell(6).setCellValue("家庭地址");row.createCell(7).setCellValue("班级");row.createCell(8).setCellValue("入学日期");row.createCell(9).setCellValue("备注");Student entity&＃61;null;for (int i &＃61; 0; i < list.size(); i&＃43;&＃43;) {entity &＃61; list.get(i);row &＃61; sheet.createRow(i&＃43;1); // 从第2行开始填充数据// 序号row.createCell(0).setCellValue(String.valueOf(i&＃43;1));row.createCell(1, CellType.STRING).setCellValue(entity.getStudentNo());row.createCell(2,CellType.STRING).setCellValue(entity.getStudentName());row.createCell(3).setCellValue(entity.getGender().equals("F")?"女":"男");row.createCell(4).setCellValue(entity.getIdno());row.createCell(5).setCellValue(entity.getPhone());row.createCell(6).setCellValue(entity.getAddress());row.createCell(7,CellType.STRING).setCellValue(getGradeNameById(entity.getGradeId()));row.createCell(8,CellType.STRING).setCellValue(DateUtil.format(entity.getEnrollDate(),"yyyy-MM-dd"));row.createCell(9).setCellValue(entity.getRemark());}response.setContentType("application/octet-stream");response.setHeader("Content-disposition","attachment;filename&＃61;" &＃43; java.net.URLEncoder.encode(fileName, "UTF-8"));response.flushBuffer();workbook.write(response.getOutputStream());}