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+iview实现文件上传
Nov 17 Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 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中的实现trim函数代码
2007/03/19 PHP
PHP 加密与解密的斗争
2009/04/17 PHP
php checkbox 取值详细说明
2010/08/19 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
python分割和拼接字符串
2013/11/01 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
详解Django CAS 解决方案
2019/10/30 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
抽样调查项目计划书
2014/04/24 职场文书
社会公德演讲稿
2014/05/20 职场文书
南京导游词
2015/02/03 职场文书
营业员岗位职责
2015/02/11 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL