目的
根據(jù)業(yè)務(wù)需求對數(shù)據(jù)進(jìn)行導(dǎo)出excel操作,該excel包括4個模版(sheet)席镀,每一個模板代表一個實(shí)體對象。如圖:
開始
本項(xiàng)目使用的是springboot + vue +elementUI 實(shí)現(xiàn)夏漱,由于需要使用導(dǎo)出excel功能豪诲,所以淺入了easyExcel模塊。
1挂绰、導(dǎo)入easyExcel坐標(biāo)依賴
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>2.2.6</version>
</dependency>
easyExcel官方文檔:https://www.yuque.com/easyexcel/doc/quickstart
2屎篱、實(shí)體類編寫
在這里使用了lombok插件服赎,使用easyExcel只需要設(shè)置導(dǎo)出的excel表列名,使用@ExcelProperty(value="")注解交播。具體配置列名重虑、數(shù)據(jù)轉(zhuǎn)換,日期格式秦士,自定義excel表格樣式缺厉,請去官網(wǎng)查看。
3隧土、controller編寫
/**
* 導(dǎo)出檔案
*/
@RequestMapping("/export")
public void export(@RequestParam Map<String, Object> params, HttpServletResponse response) throws IOException {
OutputStream outputStream = response.getOutputStream();
// 獲取數(shù)據(jù)
PageUtils page = archService.getStatistics(params);
// 獲取農(nóng)合檔案信息
List<ArchEntity> archEntityList = (List<ArchEntity>) page.getList();
// 遍歷設(shè)置List
if (archEntityList.size() > 0) {
List<FamilyEntity> familyEntityList = new ArrayList<>();
List<CardEntity> cardEntityList = new ArrayList<>();
List<PayEntity> payEntityList = new ArrayList<>();
for (int i = 0; i < archEntityList.size(); i++) {
// 獲取家庭檔案
familyEntityList.add(i, archEntityList.get(i).getFamilyEntity());
// 獲取慢性病卡檔案
cardEntityList.add(i, archEntityList.get(i).getCardEntity());
// 獲取慢性病報銷信息
payEntityList.add(i, archEntityList.get(i).getPayEntity());
}
try {
// 設(shè)置response
response.setContentType("application/vnd.ms-excel");
response.setCharacterEncoding("utf-8");
// 這里URLEncoder.encode可以防止中文亂碼 當(dāng)然和easyexcel沒有關(guān)系
String fileName = URLEncoder.encode("統(tǒng)計信息", "UTF-8");
response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx");
//新建ExcelWriter
ExcelWriter excelWriter = EasyExcel.write(outputStream).build();
//獲取archSheet對象
WriteSheet archSheet = EasyExcel.writerSheet(0, "農(nóng)合信息檔案").head(ArchEntity.class).build();
//獲取參合人員信息,向archSheet寫入數(shù)據(jù)
excelWriter.write(archEntityList, archSheet);
//獲取archSheet對象
WriteSheet familySheet = EasyExcel.writerSheet(1, "參合家庭檔案").head(FamilyEntity.class).build();
//獲取家庭參合信息,向familySheet寫入數(shù)據(jù)
excelWriter.write(familyEntityList, familySheet);
//獲取cardSheet對象
WriteSheet cardSheet = EasyExcel.writerSheet(2, "慢性病卡信息").head(CardEntity.class).build();
//獲取家庭參合信息,向cardSheett寫入數(shù)據(jù)
excelWriter.write(cardEntityList, cardSheet);
//獲取paySheet對象
WriteSheet paySheet = EasyExcel.writerSheet(3, "報銷記錄").head(PayEntity.class).build();
//獲取家庭參合信息,向paySheet寫入數(shù)據(jù)
excelWriter.write(payEntityList, paySheet);
//關(guān)閉流
excelWriter.finish();
outputStream.flush();
} catch (IOException e) {
log.error("導(dǎo)出異常{}", e.getMessage());
}
}
}
- 1提针、創(chuàng)建OutputStream對象
OutputStream outputStream = response.getOutputStream();
- 2、設(shè)置頭曹傀、類型辐脖、編碼格式
// 設(shè)置response
response.setContentType("application/vnd.ms-excel");
response.setCharacterEncoding("utf-8");
// 這里URLEncoder.encode可以防止中文亂碼 當(dāng)然和easyexcel沒有關(guān)系
String fileName = URLEncoder.encode("統(tǒng)計信息", "UTF-8");
response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx");
- 3、創(chuàng)建ExcelWriter對象
//新建ExcelWriter
ExcelWriter excelWriter = EasyExcel.write(outputStream).build();
- 4皆愉、創(chuàng)建WriteSheet對象嗜价,調(diào)用EasyExcel.writerSheet()方法寫入?yún)?shù)
//獲取archSheet對象
WriteSheet archSheet = EasyExcel.writerSheet(0, "農(nóng)合信息檔案").head(ArchEntity.class).build();
0為第一個模板(sheet),名稱是農(nóng)合信息檔案亥啦。head()中傳入的參數(shù)為實(shí)體類
- 5炭剪、調(diào)用excelWriter.write()向sheet模板寫入?yún)?shù)
//獲取參合人員信息,向archSheet寫入數(shù)據(jù)
excelWriter.write(archEntityList, archSheet);
向excelWriter.write()方法中傳入List數(shù)據(jù)與WriteSheet對象
- 6、關(guān)閉excelWriter.finish()
//關(guān)閉流
excelWriter.finish();
- 7 翔脱、關(guān)閉outputStream.flush();
outputStream.flush();
3、前端界面編寫
// 導(dǎo)出檔案
exportHandle () {
this.$nextTick(() => {
this.$http({
url: this.$http.adornUrl('/mxbbx/arch/export'),
method: 'get',
responseType: 'blob',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'groupId': this.dataForm.groupId,
'apName': this.dataForm.apName,
'areaTime': this.dataForm.areaTime,
'drName': this.dataForm.drName
})
}).then(({data}) => {
// 創(chuàng)建Blob對象
let blob = new Blob([data], { type: 'application/vnd.ms-excel;charset=utf-8' })
// 獲取路徑
let url = window.URL.createObjectURL(blob)
// 創(chuàng)建a標(biāo)簽
const link = document.createElement('a')
// 設(shè)置a標(biāo)簽鏈接參數(shù)
link.href = url
// 重命名文件
link.download = '報銷信息.xlsx'
link.click()
// 下載完成釋放URL 對象
URL.revokeObjectURL(url)
// 移除a標(biāo)簽
document.body.removeChild(link)
})
})
},
注意事項(xiàng)
1媒鼓、這里我使用的axios異步調(diào)用處理(和ajax沒啥大區(qū)別)
2届吁、請求參數(shù)中設(shè)置:responseType: 'blob',將返回響應(yīng)類型設(shè)置為blob
3绿鸣、在返回成功then()中疚沐,創(chuàng)建a標(biāo)簽,并為a標(biāo)簽設(shè)置超鏈接潮模,并設(shè)置點(diǎn)擊下載文件流亮蛔。如果不使用創(chuàng)建a標(biāo)簽的方式,將不會顯示下載彈窗G嫦帷>苛鳌!(大坑动遭,后端成功了芬探,前端一直沒有出現(xiàn)下載文件的彈窗,可能是vue的原因厘惦,在html中無需設(shè)置)