vue实现下载文件流完整前后端代码


Posted in Vue.js onNovember 17, 2020

使用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-download

npm 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前端组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue中data里面的数据相互使用方式
Jun 05 Vue.js
vue+iview实现文件上传
Nov 17 #Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 #Vue.js
vue+iview实现分页及查询功能
Nov 17 #Vue.js
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 #Vue.js
vue+iview分页组件的封装
Nov 17 #Vue.js
在vue中通过render函数给子组件设置ref操作
Nov 17 #Vue.js
vue+vant实现购物车全选和反选功能
Nov 17 #Vue.js
You might like
编写自己的php扩展函数
2006/10/09 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
javascript 冒号 使用说明
2009/06/06 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
Python中的pack和unpack的使用
2018/03/12 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
浅谈Python中(&,|)和(and,or)之间的区别
2019/08/07 Python
预备党员思想汇报范文
2014/01/11 职场文书
初三政治教学反思
2014/01/30 职场文书
校园文化建设方案
2014/02/03 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
教师党员自我评价范文
2015/03/04 职场文书
教学质量月活动总结
2015/05/11 职场文书
2015国庆节感想
2015/08/04 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript