SpringBoot+Vue实现Excel导出

环境

SpringBoot 1.5.20
Vue 2.5.2

SpringBoot

• 依赖

	org.apache.poi
	poi-ooxml
	4.0.1

• Controller

@PostMapping(value="/exportExcelAll")
@ApiOperation(value="导出", notes="导出记录")
@ApiParam(name = "", value = "", required = false)
public void exportExcel(HttpServletRequest request,HttpServletResponse response) {
   	czjlService.exportExcelAll(request,response);
}

• Service

public void exportExcelAll(HttpServletRequest request, HttpServletResponse response) {
		 try {
		 		
				List records = ... 业务逻辑这里就不粘贴了，查询要导出的数据即可
			 
		        @SuppressWarnings("resource")
				HSSFWorkbook wb = new HSSFWorkbook();

		        HSSFSheet sheet = wb.createSheet("记录");

		        HSSFRow row = null;
		        
		        int columnIndex = 0;
		   
		        row = sheet.createRow(0);
		        row.setHeight((short) (22.50 * 20));//设置行高
		        row.createCell(columnIndex).setCellValue("序号");
				row.createCell(++columnIndex).setCellValue("操作员编号");
				row.createCell(++columnIndex).setCellValue("登录账号");
				row.createCell(++columnIndex).setCellValue("功能链接地址");
				row.createCell(++columnIndex).setCellValue("链接地址附加参数");
				row.createCell(++columnIndex).setCellValue("操作开始时间");
				row.createCell(++columnIndex).setCellValue("操作结束时间");
				row.createCell(++columnIndex).setCellValue("操作结果");
				row.createCell(++columnIndex).setCellValue("结果原因描述");
				row.createCell(++columnIndex).setCellValue("操作员IP地址");
				row.createCell(++columnIndex).setCellValue("接口说明");

		        for (int i = 0; i < records.size(); i++) {
		            row = sheet.createRow(i + 1);
		            Entity entity = records.get(i);
		            
		            columnIndex = 0;
		            
	                row.createCell(columnIndex).setCellValue(i + 1);
	                row.createCell(++columnIndex).setCellValue(entity.getCzybh());
	                row.createCell(++columnIndex).setCellValue(entity.getCjrbh());
	                row.createCell(++columnIndex).setCellValue(entity.getGnljdz());
	                row.createCell(++columnIndex).setCellValue(entity.getLjdzfjcs());
	                row.createCell(++columnIndex).setCellValue(entity.getCzkssj());
	                row.createCell(++columnIndex).setCellValue(entity.getCzjssj());
	                row.createCell(++columnIndex).setCellValue(entity.getCzjgdm().equals("0") ? "成功" : "失败");
	                row.createCell(++columnIndex).setCellValue(entity.getJgyyms().equals("0") ? "无" : entity.getJgyyms());
	                row.createCell(++columnIndex).setCellValue(entity.getCzyip());
	                row.createCell(++columnIndex).setCellValue(entity.getJksm());
		        }
		        
		        sheet.setDefaultRowHeight((short) (16.5 * 20));
		        
		        //列宽自适应
		        for (int i = 0; i <= 11; i++) {
		            sheet.autoSizeColumn(i);
		        }
		        
		        String title= "czjl_all";
		        
		        response.setHeader("Content-disposition", "attachment;fileName=" + title + ".xls");
		        response.setContentType("application/octet-stream;charset=utf-8");
		        OutputStream ouputStream = response.getOutputStream();
		        wb.write(ouputStream);
		        ouputStream.flush();
		        ouputStream.close();
		        
		    } catch (IOException e) {
		        e.printStackTrace();
		    }
    }

• 这里我们用swagger调用一下接口，可以看到还要点击Download file才可以下载文件
  
• vue

/**
 * 导出全部记录
 * @param vueCtx
 * @param param
 * @param callback
 */
export function exportExcelAll(vueCtx,param,callback) {
    vueCtx.sendWorkOrder({
        url : "/czjl/exportExcelAll",
        data: param,
        procgress: true,
        back: callback,
        responseType: 'blob'  // 表明返回服务器返回的数据类型，要加在请求头里面，否则识别不了文件流
    });
}

导出全部

exportExcelAll(){
	Czjl.exportExcelAll(this,{},resp=>{
		console.log(resp);
	});
},

• 用前端调接口则发现数据传输过来并没有弹出文件框下载
  
• 将文件流转成blob形式，创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件

/**
 * 导出全部按钮点击事件
 */
exportExcelAll(){
	Czjl.exportExcelAll(this,{},resp=>{
		this.downloadFile(resp);
	});
},
/**
 * 文件导出
 */
downloadFile(data) {
	if (!data) {
		return
	}
	const link = document.createElement('a');
	let blob = new Blob([data], {type: 'application/vnd.ms-excel'});
	link.style.display = 'none';
	link.href = URL.createObjectURL(blob);

	link.setAttribute('download', '记录信息' + '.xls');
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);
},

.end