SpringBoot+Vue實現Excel導出

環境

SpringBoot 1.5.20
Vue 2.5.2

SpringBoot

• 依賴

<!-- poi -->
<dependency>
	<groupId>org.apache.poi</groupId>
	<artifactId>poi-ooxml</artifactId>
	<version>4.0.1</version>
</dependency>

• 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<entity> 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'  // 表明返回服務器返回的數據類型，要加在請求頭里面，否則識別不了文件流
    });
}

<el-button type="primary" size="mini" @click="exportExcelAll">導出全部</el-button>

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