vue中使用axios處理post方法導出excel表格。
技術點:vue、axios、poi
1、後臺輸出數據流。(ps:因爲表格模板格式會比較好看,所以建議使用模板)
/**
* 導出測試
* @return 輸出流
*/
@RequestMapping(value = "exportExcel.do")
@ResponseBody
public void exportExcel(HttpServletResponse response) {
InputStream in = null;
OutputStream out = null;
HSSFWorkbook wb = null;
try {
//讀取模板
in = this.getClass().getResourceAsStream("/static/excel/test.xls");
wb = new HSSFWorkbook(in);
//設置表格內容樣式
HSSFCellStyle cellStyle = wb.createCellStyle();
cellStyle.setBorderBottom(HSSFCellStyle.BORDER_THIN);
cellStyle.setBorderTop(HSSFCellStyle.BORDER_THIN);
cellStyle.setBorderRight(HSSFCellStyle.BORDER_THIN);
cellStyle.setBorderLeft(HSSFCellStyle.BORDER_THIN);
//垂直、水平居中
cellStyle.setAlignment(HSSFCellStyle.ALIGN_CENTER); // 水平居中
cellStyle.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER); // 上下居中
//寫入對象
Sheet sheet = wb.getSheetAt(0);
Row row = sheet.createRow(1); //創建第一行
row.setHeight((short) 500);
Cell cell0 = row.createCell(0);
cell0.setCellStyle(cellStyle);
cell0.setCellValue("測試數據");
//輸出
out = response.getOutputStream();
wb.write(out);
} catch (Exception e) {
logger.error("exception",e);
} finally {
try {
if(!ObjectUtils.isEmpty(in)){
in.close();
}
if(!ObjectUtils.isEmpty(out)){
out.close();
}
if(!ObjectUtils.isEmpty(wb)){
wb.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
2、axios post方法,使用es6 promise封裝。
exportExcel(url,data){
return new Promise((resolve, reject) => {
axios({
method: 'post',
url: this.$publicPath + this.$serverName + url, // 請求地址
data: data, // 參數
responseType: 'blob', // 表明返回服務器返回的數據類型
headers: {
'Content-Type': 'application/json'
}
}).then(res => {
resolve(res.data);
}).catch(err => {
reject(err);
});
})
},
3、導出js
/**
* 導出Excel
* @param
*/
exportScheduleExcel(){
let that = this;
//調用方法
that.exportExcel('testController/exportExcel.do',data).then(result =>{
let blob = new Blob([result]);
let fileName = '項目進度明細表.xls';
let eLink = document.createElement('a');
eLink.download = fileName;
eLink.style.display = 'none';
eLink.href = URL.createObjectURL(blob);
document.body.appendChild(eLink);
eLink.click();
URL.revokeObjectURL(eLink.href); // 釋放URL 對象
document.body.removeChild(eLink);
}).catch(err =>{
that.$message.error(err.message);
});
}