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下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 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与SQL注入攻击[二]
2007/04/17 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
javascript 多浏览器 事件大全
2010/03/23 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
python实现傅里叶级数展开的实现
2018/07/21 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
多个python文件调用logging模块报错误
2020/02/12 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
电子商务个人职业生涯规划范文
2014/02/12 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
财产保全担保书
2015/01/20 职场文书
社区母亲节活动总结
2015/02/10 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
MySQL 开窗函数
2022/02/15 MySQL