vue实现下载文件流完整前后端代码
使用Vue时，我们前端如何处理后端返回的文件流
首先后端返回流，这里我把流的动作拿出来了，我很多地方要用
/**
*下载单个文件
*
*@paramdocId
*/
@GetMapping("/download/{docId}")
publicvoiddownload(@PathVariable("docId")StringdocId,
HttpServletResponseresponse){
outWrite(response,docId);
}
/**
*输出文件流
*@paramresponse
*@paramdocId
*/
privatevoidoutWrite(HttpServletResponseresponse,StringdocId){
ServletOutputStreamout=null;
try{
out=response.getOutputStream();
//禁止图像缓存。
response.setHeader("Pragma","no-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires",0);
byte[]bytes=docService.downloadFileSingle(docId);
if(bytes!=null){
MagicMatchmatch=Magic.getMagicMatch(bytes);
StringmimeType=match.getMimeType();
response.setContentType(mimeType);
out.write(bytes);
}
out.flush();
}catch(Exceptione){
UnitedLogger.error(e);
}finally{
IOUtils.closeQuietly(out);
}
}
前端这里我引入了一个组件js-file-download
npminstalljs-file-download--save
然后在Vue文件中添加进来
importfileDownloadfrom"js-file-download";
//文档操作列对应事件
asynchandleCommand(item,data){
switch(item.key){
case"download":
varres=awaitthis.download(data);
returnfileDownload(res,data.name);
...
default:
}
//刷新当前层级的列表
constfolder=this.getLastFolderPath();
this.listClick(folder.folderId,folder.name);
},
//下载
asyncdownload(row){
if(this.isFolder(row.type)){
returnFolderAPI.download(row.id);
}else{
returnDocAPI.download(row.id);
}
},
docAPIjs注意需要设置responseType
/**
*下载单个文件
*@param{*}id
*/
constdownload=(id)=>{
returnrequest({
url:_DataAPI.download+id,
method:"GET",
responseType:'blob'
});
};
这样即可成功下载。
关于vue.js的学习教程，请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。