当前位置：首页 > news >正文

easyexcel与vue配合下载excel

news 2025/8/28 22:45:23

后端

设置响应

// 设置响应头
response.setContentType("application/octet-stream;charset=UTF-8");
String returnName = null;
try {returnName = URLEncoder.encode(fileName, "UTF-8");
} catch (UnsupportedEncodingException e) {throw new RuntimeException(e);
}
response.setHeader("Content-Disposition", "attachment;filename=" + returnName);

往response 写入数据

使用easyexcel自带的方法就行

// 这里 指定文件
try (ExcelWriter excelWriter = EasyExcel.write(response.getOutputStream()).build();) {
// try (ExcelWriter excelWriter = EasyExcel.write(fileName).build()) {if (hasXL) {WriteSheet writeSheet2 = EasyExcel.writerSheet(2, "小料费用差异对比").head(DepreciationEquipXLDto.class).build();// 获取小料费用差异List<DepreciationEquipXLDto> data2 = assetDepreciationSingleDetailService.getDepreciationEquXLCompare(entityList);excelWriter.write(data2, writeSheet2);}if (hasJL) {WriteSheet writeSheet = EasyExcel.writerSheet(0, "其他费用差异对比").head(DepreciationOtherDto.class).build();// 获取其他费用差异List<DepreciationOtherDto> data = assetDepreciationSingleDetailService.getDepreciationOtherCompare(entityList);excelWriter.write(data, writeSheet);WriteSheet writeSheet1 = EasyExcel.writerSheet(1, "胶料费用差异对比").head(DepreciationEquipJLDto.class).build();// 获取胶料费用差异List<DepreciationEquipJLDto> data1 = assetDepreciationSingleDetailService.getDepreciationEquJLCompare(entityList);excelWriter.write(data1, writeSheet1);}WriteSheet writeSheet3 = EasyExcel.writerSheet(3, "总费用差异对比").head(DepreciationTotalDto.class).build();// 获取总费用差异List<DepreciationTotalDto> data3 = assetDepreciationSingleDetailService.getDepreciationTotalCompare(entityList);excelWriter.write(data3, writeSheet3);//     获取具体的折旧明细WriteSheet writeSheet4 = EasyExcel.writerSheet(4, "折旧明细").head(DepreciationSingleDetailDto.class).build();// 获取具体的折旧明细List<DepreciationSingleDetailDto> data4 = assetDepreciationSingleDetailService.getDepreciationSingleDetail(entityList);excelWriter.write(data4, writeSheet4);} catch (IOException e) {throw new RuntimeException(e);
}

前端

后端返回了之后，有响应数据，但是不会自动下载
前端定义的返回类型必须是blob类型
创建隐式a标签，自动点击下载


export function downloadCompareFile(data) {return request({url: '/client/depreciationDetail/downloadCompareFile',method: 'post',data: data,responseType: 'blob' // 表明返回服务器返回})
}

downloadCompareFile(){downloadCompareFile(this.compareDataListParams).then((res) => { // 处理返回的文件流const content = resconst blob = new Blob([content])console.log(content)const fileName = 'xxx.xlsx'if ('download' in document.createElement('a')) { // 非IE下载const elink = document.createElement('a')elink.download = fileNameelink.style.display = 'none'elink.href = URL.createObjectURL(blob)document.body.appendChild(elink)elink.click()URL.revokeObjectURL(elink.href) // 释放URL 对象document.body.removeChild(elink)}})
},