vue 后台返回的文件流进行预览_vue实现下载文件流完整前后端代码

这篇文章主要为大家详细介绍了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-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前端组件学习教程进行学习。

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

来源:脚本之家

链接:https://www.jb51.net/article/199923.htm

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/540043.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OSPF-5类LSA和4类LSA

# 5类LSA :外部路由前缀 ASBR的router_id IOU5#sh ip ospf data extOSPF Router with ID (5.5.5.5) (Process ID 1)Type-5 AS External Link StatesLS age: 71Options: (No TOS-capability, DC, Upward)LS Type: AS External LinkLink State ID: 10.1.55.0 (Extern…

2014年9月计算机二级mysql真题_2017年9月全国计算机二级MySQL考试章节练习题

2017年9月全国计算机二级MySQL考试章节练习题计算机二级考试成绩在“及格”,即60~89分者,由教育部考试中心发合格证书,考试成绩在“优秀”,即90~100分者,由教育部考试中心发优秀证书。这是小编给大家提供的2017年9月全…

macOS 10.11.* 安装scrapy

1.安装brew,然后修改brew源为某高校 2.更新python brew install python 3.安装pip 4.安装scrapy,这里肯定会有一个坑,之前在网上看到10.11开启了什么rootless的东西, 会遇到安装six失败,原因是由于系统安装了six&#…

eclipse使用小技巧

1. eclipse自带内存监视及回收插件 菜单 Window > Preferences > General > 右边,把 Show Heap Status 打上勾就会在右下角任务栏显示内存监视器,并且可以点击内存回收。 2. http://www.eclipse.org/downloads/3. 摘录热键篇:Template&#xff…

mysql @ $_mysql常见笔试题

一、Mysql常见笔试题1、Mysql 中有哪几种锁?(1)表级锁:开销小,加锁快。不会出现死锁,锁定粒度大,发生锁冲突的概率高,并发度低。(2)行级锁:开销大,加锁慢。会出现死锁,锁…

mysql无法与外部健形成约束_MySQL Rails:错误:150“外键约束不正确”

我试图迁移我的Rails MySQL数据库,我收到以下错误:ActiveRecord :: StatementInvalid:Mysql2 :: Error:无法创建表development.comments(错误:150“外键约束形成错误”):CREATE TABLE注释(id int AUTO_INCR…

按角度构建切变矩阵

切变是坐标系的变换,非均匀的拉伸。切变时候,角度变化,但是面积或体积不变。也可以理解为坐标轴间的角度变化,造成的扭曲。 如下图,这是x坐标根据y坐标的切变,机器人的y坐标没有变化,只有x坐标变…

java 语法_Java基础语法

标识符定义给包,类,方法,变量起名字的符号。组成规则标识符由字母、数字、下划线、美元符号组成。命名原则:见名知意包名:全部小写,多级包用.隔开。举例:com.jourwon类、接口:一个单词首字母大写,多个单词每个单词的首字母大写。举…

POJ1061:青蛙的约会——题解

http://poj.org/problem?id1061 Description 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面。它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止。可是它们出发之前忘记了一件很重要的…

用了mysql报oracle错误_mysql数据迁移到oracle错误总结

最近处理一个需求,使用脚本方式将mysql里的数据迁移到oracle中。处理思路主要是利用mysqldump导出的insert dump文件,oracle中建立相同表结构执行insert。记录本次操作中遇到的问题与处理方式:1、超4000字节字符串导入问题描述oracle varchar…

运行Hadoop自带的wordcount单词统计程序

1.使用示例程序实现单词统计 (1)wordcount程序 wordcount程序在hadoop的share目录下,如下: 123456789[rootleaf mapreduce]# pwd /usr/local/hadoop/share/hadoop/mapreduce[rootleaf mapreduce]# ls hadoop-mapreduce-client-app…

java for 线程_如何在for循环中使用多线程

import java.util.concurrent.Executor;import java.util.concurrent.Executors;public class Test {private final static Executor executor Executors.newCachedThreadPool();//启用多线程public static void main(String[] args) {for(int i0;i<3;i){final int ji; …

office2010安装出现错误1935的解决方法

安装Office2010 professional plus 2010过程中弹出错误&#xff0c;提示错误 1935&#xff0c;安装程序集组件的过程中发生错误。HRESULT:0x800070BC9 如下图所示&#xff1a; 这个错误是由于电脑.net framework 未安装或安装有错误导致的。解决方法为&#xff1a;下载.net fra…

java linux 服务_java项目部署Linux服务器几种启动方式总结经验

一&#xff1a;两种部署包&#xff1a;部署之前先说下两种包&#xff0c;java项目部署到服务器一般有用war包的&#xff0c;也有用jar包的&#xff0c;微服务spring-cloud普及后大部分打包都是jar&#xff0c;部署之前先搞清楚自己要打war包还是jar包&#xff0c;下面小介绍两种…

HTML温故知新1

什么是 HTML&#xff1f; HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言&#xff0c;而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页 HTML 标签 HTML 标…

java 接口与包_java常用类包接口

类StringIntegerLongFileDateThread(java.lang.ThreadThread类的定义&#xff1a;public class Thread extends Object implements Runnable)包java.lang.*;java.io.*;java.util.*;java.sql.*;java.math.*;接口:ComparableCollectionMapListRunnable(java.lang.Runnable 该接口…

当使用easyui时,表单的onchange事件失效

功能&#xff1a;新增信徒页面&#xff0c;当选择未受洗&#xff0c;设置受洗时间&#xff0c;教堂选项 disabled。 步骤&#xff1a; 在<select>标签里加入 οnchange"xxxxx()"。 在js里编写xxxxx()方法。 测试 教堂选项没有 disabled。 原因&#xff1…

shell脚本:批量修改文件名(文件名中添加字符)

举例如下&#xff1a;批量创建10个随机字符串的文件&#xff0c;要求每个文件名后面添加_aaa,后缀名不变&#xff1b; [rootlocalhost goodboy]# ls adddbbdedf.html baacjaiija.html bhcfaabcfh.html dgjdcdfbca.html efejadfdji.html agdhcdeaje.html bgffbffjcg.html …

java 格式化小数_java-如何格式化小数位数精度

正如评论中指出的那样,如果您只有一个String表示形式,那么就无法判断它实际上是否有重复的部分,或者精度是否不够高.更新我正在研究一个用分子和分母表示为BigIntegers的有理数的类(并假定尽可能地简化).在那里,我实现了一种以十进制字符串形式表示的方法,并提出了以下方法&…

当使用easyui时,jquery的设置disabled属性方法失效

功能&#xff1a;选择未受洗&#xff0c;设置受洗时间&#xff0c;教堂选项 disabled 步骤&#xff1a; 使用了常规的jquery的方法 //两种方法设置disabled属性$(#areaSelect).attr("disabled",true);$(#areaSelect).attr("disabled","disabled&quo…