今天在给我的小伙伴们解决问题的时候,遇到了一个小问题就是前段怎么接收文件流进行下载的问题。这里是用Word模板生成相应的Word文件。
这里先说前段代码,首先拦截器处理
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
if (response.status === 200) {
return response.data
} else {
if (response.statusText) {
return Promise.reject(response.statusText)
} else {
return Promise.reject(response)
}
}
}, function (error) {
console.log(error)
if (error.response.data.errCode === '100119' || error.response.data.errCode === '100128') {
//跳转页面
store.commit('logout')
router.replace({path: '/login'})
}
return Promise.reject(error.response.data)
})
注意啊,这里已经返回的response.data了
下面是API配置,这里划重点,responseType:'blob'
// 下载合同
downloadHe(p){
return axios({
url:"/contract/exertContract",
method:'post',
data:p,
responseType:'blob',
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
},
下面是方法调用之后处理
http.downloadHe(Qs.stringify(obj)).then(res=>{
let blob = new Blob([res.data],{ type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8' });
let link = document.createElement('a');
// link.download = fileName//a标签添加属性
let objectUrl = URL.createObjectURL(blob);
link.setAttribute("href",objectUrl);
link.setAttribute("download", '合同详情.docx');
link.click();
//释放内存
window.URL.revokeObjectURL(link.href)
})
} else {
// console.log(this.formValidate)
this.$Message.error('请填写完整');
}
})
上面这就是前段的代码了,其实后端代码也很简单,就是我的小伙伴有些错误操作,先看错误代码:
if (suffix.equals("docx")) {
XWPFDocument doc = new XWPFDocument(fileInputStream);
replaceInTable(doc, map);
response.reset();
//指定文件类型
response.setContentType("application/x-msdownload");
String fileName = "" + System.currentTimeMillis() + ".docx";
response.addHeader("Content-Disposition", "attachment; filename=" + fileName);
ByteArrayOutputStream ostream = new ByteArrayOutputStream();
OutputStream servletOS = null;
try {
servletOS = response.getOutputStream();
doc.write(servletOS);
ostream.flush();
servletOS.write(ostream.toByteArray());
servletOS.flush();
ostream.close();
servletOS.close();
} catch (Exception e) {
e.printStackTrace();
}
}
修改之后的代码正确代码如下:
OutputStream servletOS = null;
try {
//获取文件后缀
String suffix = PathUtils.getSuffix(modelPath);
if (suffix.equals("docx")) {
XWPFDocument doc = new XWPFDocument(fileInputStream);
replaceInTable(doc, map);
//指定文件类型
response.setContentType("application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8");
servletOS = response.getOutputStream();
doc.write(servletOS);
}
} catch (Exception e) {
e.printStackTrace();
}finally {
servletOS.flush();
servletOS.close();
}