1. 后端代码
response.setCharacterEncoding(StandardCharsets.UTF_8.name()); // 字符集编码
response.setContentType("application/octet-stream"); // 返回内容的MIME类型
response.addHeader("Content-disposition", "attachment;filename=" + fileName + ";filename*=UTF-8" + fileName); // 内容描述
response.addHeader("Access-Control-Allow-Origin", "*"); // 实现跨域
// 列表哪些header可以作为响应的一部分暴露给外部(除了默认的七种,其他的是不暴露给外部的)
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
2. 链接下载文件
filename编码格式:
/**
* 编码格式转换
*
* @param request 请求
* @param pFileName 文件名称
* @return String
* @throws UnsupportedEncodingException
*/
private String encodeChineseDownloadFileName(HttpServletRequest request, String pFileName)
throws UnsupportedEncodingException {
String filename;
String agent = request.getHeader("USER-AGENT");
if (null != agent) {
if (-1 != agent.indexOf("Firefox")) {
filename = "=?UTF-8?B?" + (new String(Base64.decode(pFileName.getBytes(StandardCharsets.UTF_8)))) + "?=";
} else if (-1 != agent.indexOf("Chrome")) {
filename = new String(pFileName.getBytes(), StandardCharsets.ISO_8859_1);
} else {//IE7+
filename = URLEncoder.encode(pFileName, StandardCharsets.UTF_8.name());
}
} else {
filename = pFileName;
}
return filename;
}
前端代码:
function downLoadFile (url) {
url += '&access_token=' + sessionStorage.getItem('accessToken') || localStorage.getItem('accessToken')
const elink = document.createElement('a') // 创建a标签
// elink.download = fileName // 重命名文件
elink.style.display = 'none'
elink.href = url
document.body.appendChild(elink)
elink.click() // 触发链接
document.body.removeChild(elink)
}
3. 后台返回的数据流转换任意文档格式
文档格式对照表:http://tools.jb51.net/table/http_content_type
eg: .zip —— application/zip ;.xls —— application/vnd.ms-excel
前端代码:
// 封装axios的下载数据流转换成zip
axios.defaults.baseURL = 'http://localhost:8080'
export function downLoadFileZip (url, params = {}, fileName, baseURL, timeout) {
if (baseURL) {
axios.defaults.baseURL = baseURL
}
if (timeout) {
axios.defaults.timeout = timeout
}
let config = {
'responseType': 'blob',
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/octet-stream; charset=utf-8',
'token': sessionStorage.getItem('accessToken') || localStorage.getItem('accessToken')
}
axios.post(url, params, config).then(response => {
fileName = this.getFileName(fileName, response)
// 二进制类型的大对象, type对应文档类型
let blob = new Blob([response.data], { type: 'application/zip' })
if ('download' in document.createElement('a')) {
const elink = document.createElement('a') // 创建a标签
elink.download = fileName // 重命名文件
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click() // 触发链接
URL.revokeObjectURL(elink.href) // 释放内存
document.body.removeChild(elink)
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName)
}
})
.catch(error => {
console.log(error)
})
}
/**
* 获取文件面那改成
* @param {*} fileName 文件名称
* @param {*} response 响应
*/
getFileName(fileName, response) {
// 需要响应设置此header暴露给外部,才能获取到
let contentDisposition = response.headers['content-disposition']
if (contentDisposition) {
// 正则获取filename的值
let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/
let matches = filenameRegex.exec(contentDisposition)
if (matches != null && matches[1]) {
fileName = matches[1].replace(/['"]/g, '')
}
// 通过 URLEncoder.encode(pFileName, StandardCharsets.UTF_8.name()) 加密编码的, 使用decodeURI(fileName) 解密
fileName = decodeURI(fileName)
// 通过 new String(pFileName.getBytes(), StandardCharsets.ISO_8859_1) 加密编码的, 使用decodeURI(escape(fileName)) 解密
// fileName = decodeURI(escape(fileName))
}
return fileName
}
`
注: 之前用的get请求方法,出现了如下情况
转换成.zip是能转换的,但是转换出的zip文件比链接下载的更大。
出现三种情况(和上传的文件个数和顺序有关):
- 压缩包里只有一个文件时,正常
- 压缩包应有多个文件时,转换后只有一个文件,其余的文件没有了
- 压缩包应有多个文件时,整个里面就变成了一个文件