后端代码
pom
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi</artifactId>
<version>3.17</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.poi/poi-ooxml -->
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml</artifactId>
<version>3.17</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.poi/poi-ooxml-schemas -->
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml-schemas</artifactId>
<version>3.17</version>
</dependency>
controller
@RequestMapping("downloadExcel")
@ResponseBody
public void downloadExcel(HttpServletResponse response){
try {
goodService.exportDataToEx(response);
} catch (Exception e) {
e.printStackTrace();
}
}
service
public void exportDataToEx(HttpServletResponse response) throws IOException {
HSSFWorkbook workbook = new HSSFWorkbook();
HSSFSheet sheet = workbook.createSheet("商品信息表");
List<Good> goodList = goodMapper.getAllExcelGood();
// 设置要导出的文件的名字
SimpleDateFormat sf = new SimpleDateFormat("yyyyMMddHHmmss");
String fileName = "goodinfo" + sf.format(new Date()) + ".xls";
// 新增数据行,并且设置单元格数据
int rowNum = 1;
// headers表示excel表中第一行的表头 在excel表中添加表头
String[] headers = { "ID", "商品条码", "名称", "类型","规格","建议零售价","我的零售价","库存预警量"};
HSSFRow row = sheet.createRow(0);
for(int i=0;i<headers.length;i++){
HSSFCell cell = row.createCell(i);
HSSFRichTextString text = new HSSFRichTextString(headers[i]);
cell.setCellValue(text);
}
//在表中存放查询到的数据放入对应的列
for (Good item : goodList) {
HSSFRow row1 = sheet.createRow(rowNum);
row1.createCell(0).setCellValue(item.getId());
row1.createCell(1).setCellValue(item.getBarcode());
row1.createCell(2).setCellValue(item.getTitle());
row1.createCell(3).setCellValue(item.getTypeid());
row1.createCell(4).setCellValue(item.getWeight());
row1.createCell(5).setCellValue(item.getPrice());
rowNum++;
}
response.setContentType("application/octet-stream");
response.addHeader("Access-Control-Expose-Headers", "Content-Disposition");
response.setHeader("Content-disposition", "attachment;filename=" + fileName);
response.flushBuffer();
OutputStream outputStream = response.getOutputStream();
workbook.write(response.getOutputStream());
outputStream.flush();
outputStream.close();
}
Vue前端代码
axios({
method: 'post',
url:requesturl,
responseType: 'blob'
})
.then(res => {
const filename = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]) || '商品信息表.xls'
const blob = new Blob([res.data], {
type: 'application/octet-stream'
})
let url = window.URL.createObjectURL(blob);
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click()
})
遇到的问题
1.response返回了包含响应头所带的所有数据,可以使用console.log(response)查看打印数据,但是打印出来的数据只能拿到默认的响应头,这里有个需要注意的地方。
Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
如果想让浏览器能访问到其他响应头的话,需要后端在服务器上设置Access-Control-Expose-Headers
response.addHeader("Access-Control-Expose-Headers", "Content-Disposition");
response.setHeader("Content-disposition", "attachment;filename=" + fileName);
这样response.headers[‘content-disposition’].split(’;’)[1].split(’=’)[1] 就能取到接口返回的文件名称了。