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前端组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。