济源建设网站,易语言做网站登录器,睢县做网站,哈尔滨服务好的建站方案这篇文章主要为大家详细介绍了vue实现下载文件流完整前后端代码#xff0c;文中示例代码介绍的非常详细#xff0c;具有一定的参考价值#xff0c;感兴趣的小伙伴们可以参考一下使用Vue时#xff0c;我们前端如何处理后端返回的文件流首先后端返回流#xff0c;这里我把流…这篇文章主要为大家详细介绍了vue实现下载文件流完整前后端代码文中示例代码介绍的非常详细具有一定的参考价值感兴趣的小伙伴们可以参考一下使用Vue时我们前端如何处理后端返回的文件流首先后端返回流这里我把流的动作拿出来了我很多地方要用/*** 下载单个文件** param docId*/GetMapping(/download/{docId})public void download(PathVariable(docId) String docId,HttpServletResponse response) {outWrite(response, docId);}/*** 输出文件流* param response* param docId*/private void outWrite(HttpServletResponse response, String docId) {ServletOutputStream out 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) {MagicMatch match Magic.getMagicMatch(bytes);String mimeType match.getMimeType();response.setContentType(mimeType);out.write(bytes);}out.flush();} catch (Exception e) {UnitedLogger.error(e);} finally {IOUtils.closeQuietly(out);}}前端这里我引入了一个组件 js-file-downloadnpm install js-file-download --save然后在Vue文件中添加进来import fileDownload from js-file-download;// 文档操作列对应事件async handleCommand(item, data) {switch (item.key) {case download:var res await this.download(data);return fileDownload(res, data.name);...default:}// 刷新当前层级的列表const folder this.getLastFolderPath();this.listClick(folder.folderId, folder.name);},// 下载async download(row) {if (this.isFolder(row.type)) {return FolderAPI.download(row.id);} else {return DocAPI.download(row.id);}},docAPI js 注意需要设置responseType/*** 下载单个文件* param {*} id*/const download (id) {return request({url: _DataAPI.download id,method: GET,responseType: blob});};这样即可成功下载。关于vue.js的学习教程请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。以上就是本文的全部内容希望对大家的学习有所帮助也希望大家多多支持脚本之家。来源脚本之家链接https://www.jb51.net/article/199923.htm申请创业报道分享创业好点子。点击此处共同探讨创业新机遇
