javascript 代码如下
/* 下载方法 */
downFile(blob, fileName) {
// 非IE下载
if ('download' in document.createElement('a')) {
let link = document.createElement('a');
link.href = window.URL.createObjectURL(blob); // 创建下载的链接
link.download = fileName; // 下载后文件名
link.style.display = 'none';
document.body.appendChild(link);
link.click(); // 点击下载
window.URL.revokeObjectURL(link.href); // 释放掉blob对象
document.body.removeChild(link); // 下载完成移除元素
} else {
// IE10+下载
window.navigator.msSaveBlob(blob, fileName);
}
},
downloadFile(url, data) {
let requestData = Object.assign({}, data, {
accessToken: sessionStorage.getItem('accessToken')
});
// 响应类型：arraybuffer, blob
axios.post(url, requestData, {responseType: 'blob'}).then(resp => {
let headers = resp.headers;
let contentType = headers['content-type'];
console.log('响应头信息', headers);
if (!resp.data) {
console.error('响应异常：', resp);
return false;
} else {
console.error('下载文件：', resp);
const blob = new Blob([resp.data], {type: contentType});
const contentDisposition = resp.headers['content-disposition'];
let fileName = 'unknown';
if (contentDisposition) {
fileName = window.decodeURI(resp.headers['content-disposition'].split('=')[1]);
}
console.log('文件名称：', fileName);
this.downFile(blob, fileName);
}
}).catch(function (error) {
console.log(error);
});
}
注意： 两种responseType的区别
-
arrarybuffer: 响应的data如下图
image.png -
blob：响应的data如下图
image.png
遇到的坑：
- 无法获取响应头（即无法获取文件名）：
content-disposition
In case of CORS requests, browsers can only access the following response headers by default:
- Cache-Control
- Content-Language
- Content-Type
- Expires
- Last-Modified
- Pragma
If you would like your client app to be able to access other headers, you need to set the Access-Control-Expose-Headers header on the server: Access-Control-Expose-Headers: Access-Token, Uid
解决方法1：
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
解决方法2：在跨域中设置 exposeHeaders
@Bean
CorsConfigurationSource corsConfigurationSource() {
CorsConfiguration configuration = new CorsConfiguration();
configuration.setAllowCredentials(true);
configuration.setAllowedOrigins(Arrays.asList(FRONT_END_SERVER));
configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE"));
configuration.setAllowedHeaders(Arrays.asList("X-Requested-With","Origin","Content-Type","Accept","Authorization"));
// This allow us to expose the headers
configuration.setExposedHeaders(Arrays.asList("Access-Control-Allow-Headers", "Authorization, x-xsrf-token, Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, " +
"Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"));
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", configuration);
return source;
}
- 下载的文件名乱码
将文件名进行utf-8编码
String fileName = URLEncoder.encode("导入成交比模板.xls", "UTF-8");
response.setHeader("Content-Disposition", "attachment;filename="+fileName);
后端主要 java 代码如下：
// 题头
List headNameList = statisticsService.getExcelHeader("downLoad");
// 生成导入模板
HSSFWorkbook wb = ExcelUtil.exportTemplate("导入成交比模板", null, headNameList);
// 设置导出格式为Excel
response.setContentType("application/vnd.ms-excel");
// 设置文件名并解决中文乱码
String fileName = URLEncoder.encode("导入成交比模板.xls", "UTF-8");
response.setHeader("Content-Disposition", "attachment;filename="+fileName);
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "No-cache");
response.setDateHeader("Expires", 0);
// 声明输出流
OutputStream ouputStream = response.getOutputStream();
// 输出文件
wb.write(ouputStream);
ouputStream.flush();
ouputStream.close();
参考连接：
- https://stackoverflow.com/questions/37897523/axios-get-access-to-response-header-fields
- Access-Control-Expose-Headers
- https://www.kancloud.cn/yunye/axios/234845