Vue + axios + SpringBoot 2实现导出Excel
1. 前端js代码-发送Http请求
/**
* 文件下载
* @param url 下载地址
* @param fileName 文件名称
* @param params 参数
*/
downloadFile: function (url, params) {
params = params || {}
let httpService = axios.create({
timeout: 300000, // 请求超时时间
headers: {
'Cache-Control': 'no-cache'
}
})
return httpService({
method: 'POST',
url: url,
data: params,
responseType: 'blob'
}).then(res => {
return res.data
})
},
/**
*文件上传
* @param url 上传地址
* @param file 文件对象 target.files <input type='file'> 的文件对象
* @param params 参数可以添加fileName ,type等等
* @returns {Promise<AxiosResponse | never>}
*/
uploadFile: function (url, file, params) {
const formData = new FormData()
params = params || {}
Object.keys(params).map(key => {
formData.append(key, params[key])
})
formData.append('type', params['type'] || 'ReadExcel')
formData.append(params['fileName'] || 'file', file)
let httpService = axios.create({
timeout: 300000, // 请求超时时间
headers: {
'Cache-Control': 'no-cache',
'Content-Type': 'multipart/form-data'
}
})
return httpService.post( url, formData).then(res => {
return res.data
})
}
2. 前端js代码-处理后端返回的流数据(通用处理二进制文件的方法,而不仅仅针对Excel)
/**
@resData 后端响应的流数据
@fileName 文件名称 如果后端设置的是xls/xlsx与后端文件后缀一致。
**/
function dealDownLoadData(resData,fileName){
try {
let blob ;
if(resData instanceof Blob){
blob = resData;
}else{
blob = new Blob([resData], { type: resData.type});
}
if (!!window.ActiveXObject || "ActiveXObject" in window) { //IE浏览器
//navigator.msSaveBlob(blob, fileName); //只有保存按钮
navigator.msSaveOrOpenBlob(blob, fileName); //有保存和打开按钮
}else{
var linkElement = document.createElement('a');
var url = window.URL.createObjectURL(blob);
linkElement.setAttribute('href', url);
linkElement.setAttribute("download", fileName);
var clickEvent = new MouseEvent("click",
{
"view": window,
"bubbles": true,
"cancelable": false
});
linkElement.dispatchEvent(clickEvent);
}
} catch (ex) {
console.log(ex);
}
}
3.导出Excel
/**
* 导出Excel
* @param request
* @return
* @throws Exception
*/
@RequestMapping(value = "/xxx")
public ResponseEntity<Resource> downloadFileApi() throws Exception {
//Excel场景一:直接创建,然后编辑内容
HSSFWorkbook hssfWorkbook = new HSSFWorkbook();
//Excel场景二:读取模板,然后在模板中编辑内容
POIFSFileSystem poifsFileSystem = new POIFSFileSystem(new FileInputStream("/template.xls"));
hssfWorkbook = new HSSFWorkbook(poifsFileSystem);
//写到输出流中
ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
hssfWorkbook.write(outputStream);
//文件名称:注意:这里的后缀名称必须是xls或 xlsx,不然不能识别为excel
String fileName = "xxx.xls";
//返回
ByteArrayInputStream is = new ByteArrayInputStream(outputStream.toByteArray());
//调用通用下载文件方法
return this.downloadFile(is, fileName);
}
/**
* 通用的下载方法,可以下载任何类型文件
* @param is
* @param fileName
* @return
* @throws IOException
*/
public ResponseEntity<Resource> downloadFile(InputStream is,String fileName) throws IOException{
HttpHeaders headers = new HttpHeaders();
headers.add("Cache-Control", "no-cache, no-store, must-reval("Pragma", "no-cache");
headers.add("Expires", "0");
headers.add("charset", "utf-8");
//设置下载文件名
headers.add("Content-Disposition", "attachment;filename=\"" + URLEncoder.encode(fileName, "UTF-8") + "\"");
Resource resource = new InputStreamResource(is);
return ResponseEntity.ok()
.headers(headers)
//根据文件名称确定文件类型。
.contentType(MediaType.parseMediaType(HttpKit.getMimeType(fileName)))
.body(resource);
}