前后端分离springboot+vue2查询数据导出为Excel

后端添加POI依赖dependency groupIdorg.apache.poi/groupId artifactIdpoi/artifactId version5.2.3/version /dependency dependency groupIdorg.apache.poi/groupId artifactIdpoi-ooxml/artifactId version5.2.3/version /dependency后端接口// 条件导出流程 PostMapping({/exportActivesByCondition}) public void exportActivesByCondition(RequestBody MapString, Object paramMap, HttpServletResponse response) throws IOException { processService.exportActivesByCondition(paramMap, response); }后端实现Override public void exportActivesByCondition(MapString, Object paramMap, HttpServletResponse response) throws IOException { Process process new Process(); String formType (String)paramMap.get(formType); process.setTitle(formType); process.setOrderId((String)paramMap.get(orderId)); String currentUsername BaseContext.getCurrentUsername(); // 查询数据 ListProcess processList processMapper.exportActivesByCondition(process, currentUsername); // 2. 设置响应头 response.setContentType(application/vnd.openxmlformats-officedocument.spreadsheetml.sheet); response.setCharacterEncoding(UTF-8); String fileName URLEncoder.encode(导出数据_ System.currentTimeMillis(), UTF-8) .replaceAll(\\, %20); response.setHeader(Content-Disposition, attachment;filename*utf-8 fileName .xlsx); // 使用POI创建Excel XSSFWorkbook workbook new XSSFWorkbook(); XSSFSheet sheet workbook.createSheet(Sheet1); // 创建表头 String[] headers {订单单号, 表单类型, 申请人, 流程状态}; XSSFRow headerRow sheet.createRow(0); for (int i 0; i headers.length; i) { XSSFCell cell headerRow.createCell(i); cell.setCellValue(headers[i]); } // 填充数据 for (int i 0; i processList.size(); i) { XSSFRow dataRow sheet.createRow(i 1); Process p processList.get(i); dataRow.createCell(0).setCellValue(p.getOrderId()); dataRow.createCell(1).setCellValue(p.getTitle()); dataRow.createCell(2).setCellValue(p.getApplicant()); dataRow.createCell(3).setCellValue(p.getStage()); } // 输出 workbook.write(response.getOutputStream()); workbook.close(); }前端el-button sizemini clickexportActives :disabledisSubmit导出流程/el-button组件方法放在 method方法内// 导出进行中流程 async exportActives() { this.isSubmit true // 禁用 try { // console.log(this.Parameters.stage) const response await reqExportActivesByCondition(this.queryParams) downloadExcel(response, 流程数据_${new Date().getTime()}.xlsx) this.$message.success(导出成功) } catch (error) { this.$message.error(导出失败请重试, error) this.isSubmit false // 取消禁用 } this.isSubmit false // 取消禁用 },下载excel方法/** * 下载Excel文件 */ export function downloadExcel(blob, fileName export_${Date.now()}.xlsx) { // 创建下载链接 const link document.createElement(a) const url URL.createObjectURL(blob) link.href url link.download fileName document.body.appendChild(link) link.click() document.body.removeChild(link) URL.revokeObjectURL(url) }请求接口需要把相应类型设置为 blob。responseType: blob// 条件导出流程 export function reqExportActivesByCondition(params) { return request({ url: /process/exportActivesByCondition, method: post, data: params , responseType: blob }) }