vue3 和springboot配合如何实现服务器端文件的下载。

先看springboot的后台代码:

 @PostMapping("/download")
@ResponseBody
public void downloadWord(HttpServletResponse response, HttpServletRequest request,@Valid String filePath) { try {
//获取文件的路径filePath是服务器端存放文件的完整地址
File file = ResourceUtils.getFile(filePath); //文件后缀名
String suffex = filePath.split("\\.")[1]; // 读到流中
InputStream inStream = new FileInputStream(file);//文件的存放路径
// 设置输出的格式
response.reset();
response.setContentType("bin");
//文件名中午乱码的问题没有解决所以,文件名后端都叫1.XXX,最后文件名由前端重新修改
response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("1."+suffex, "UTF-8"));
// 循环取出流中的数据
byte[] b = new byte[200];
int len; while ((len = inStream.read(b)) > 0) {
response.getOutputStream().write(b, 0, len);
}
inStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}

vue端:

网络请求使用axios ,文件下载使用file-saver

npm install file-saver --save  

bower install file-saver

注:axios参照vue axiox网络请求  ,如下代码不在同一个文件内,根据需求自行规划

import axios from "axios"; // 引用axios
import qs from 'qs'; const instance = axios.create({
baseURL: config.baseUrl.dev,
timeout: 60000,
responseType: 'blob', //这里是关键
withCredentials: true,
crossDomain: true,
transformRequest: [function(data) {
data = qs.stringify(data);
return data;
}],
headers: {
'apiVersion': 'v1',
}
}); export function postBlob(url, data = {}) {
return new Promise((resolve, reject) => {
instance.post(url, data)
.then((response) => {
resolve(response);
})
.catch((err) => {
reject(err);
});
});
} //资源下载的接口定义
export const resourceDownload = (params) => postBlob("/zy/download", params); //资源下载的方法
downLoadfunction(index) {
//获得资源的名称
let fileName = this.getFileName(this.data1[index].resourcesPath);
//指定资源在服务期端的路径
let paramter = {
filePath: this.data1[index].resourcesPath
};
resourceDownload(paramter).then(res => {
var FileSaver = require('file-saver');
var blob = new Blob([res.data], {
type: "text/plain;charset=utf-8"
});
FileSaver.saveAs(blob, fileName)
})
.catch(error => {});
}, //获取文件名
getFileName(url) {
let name = "";
if (url !== null && url !== "") {
name = url.substring(url.lastIndexOf("/") + 1);
} else {
name = "无";
}
return name;
},

vue+spingboot 实现服务器端文件下载功能的更多相关文章

  1. JAVA文件下载功能问题解决日志

    今天给报告系统做了个下载功能,遇到了挺多问题,通过查资料一一解决了. 1.首先遇到的问题是:java后台的输出流输出之后,没有任何报错,浏览器端不弹出保存文件的对话框,原本是ajax请求到后台的con ...

  2. 解决springmvc中文件下载功能中使用javax.servlet.ServletOutputStream out = response.getOutputStream();后运行出异常但结果正确的问题

    问题描述: 在springmvc中实现文件下载功能一般都会使用javax.servlet.ServletOutputStream out = response.getOutputStream();封装 ...

  3. WebView实现文件下载功能

    WebView控制调用相应的WEB页面进行展示.安卓源码当碰到页面有下载链接的时候,点击上去是一点反应都没有的.原来是因为WebView默认没有开启文件下载的功能,如果要实现文件下载的功能,需要设置W ...

  4. Vue (二) --- Vue对象提供的属性功能

    --------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者 ...

  5. vue 对象提供的属性功能、通过axio请求数据(2)

    1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...

  6. Spring Boot实现文件下载功能

    我们只需要创建一个控制器(Controler)文件,即Controller目录下的File_Download.java,其完整目录如下: @Controller public class File_D ...

  7. Spring Boot入门(11)实现文件下载功能

      在这篇博客中,我们将展示如何在Spring Boot中实现文件的下载功能.   还是遵循笔者写博客的一贯风格,简单又不失详细,实用又能让你学会.   本次建立的Spring Boot项目的主要功能 ...

  8. vue教程2-07 微博评论功能

    vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  9. ASP.NET网页中RAR、DOC、PDF等文件下载功能实例源代码

    以前做asp.net下载功能的时候都是采用:<a href="http://www.wang0214.com/wgcms">下载</a>的方式来实现下载. ...

  10. java web文件下载功能实现 (转)

    http://blog.csdn.net/longshengguoji/article/details/39433307 需求:实现一个具有文件下载功能的网页,主要下载压缩包和图片 两种实现方法: 一 ...

随机推荐

  1. Go笔记(2)-5种运算符总结

    运算符 (1)算术运算符 (2)关系运算符 (3)逻辑运算符 (4)位运算符 (5)赋值运算符

  2. GHOST 系统安装教程 轻松一键,系统恢复到最佳状态

    硬盘安装系统 安装前准备 1.保证能够正常进入系统: 2.下载Ghost系统镜像文件: 3.下载镜像安装器: 安装步骤 1.下载Ghost系统镜像"Win7_x64_Pure_5.07.GH ...

  3. Mongo 数据库备份和恢复命令

    转载请注明出处: 在MongoDB中,使用mongodump和mongorestore命令来备份和恢复数据库 mongodump 1.使用方法: 使用 mongodump 命令可以备份MongoDB数 ...

  4. 华企盾DSC使用outlook发送加密文件提示解密插件未加载

    1.如果是非exchange邮箱,不能勾选"启用邮件白名单outlook插件(exchange邮箱建议勾选)"​ 2.如果是exchange邮箱则需要勾选"启用邮件白名单 ...

  5. 如何实现CesiumJS的视效升级?

    CesiumJS作为一款强大的地理可视化引擎,为我们提供了丰富的地球数据可视化和交互展示的能力.然而,随着用户需求的不断增加和技术的不断进步,如何进一步提升CesiumJS的视觉效果成为了一个重要的问 ...

  6. Sql整理

    1:数据库 数据库是以某种有组织的方式存储的数据集合. 保存有组织数据的容器,通常是一个文件或者一组文件. SQL 是Structured Query Language (结构化查询语言)的缩写. 2 ...

  7. ElasticSearch之Health API

    查看当前集群全部健康指标的信息,执行如下命令: curl -X GET "https://localhost:9200/_health_report?pretty" --cacer ...

  8. linux rz/sz 拖动文件上传

    不需要第三方上传文件直接 rz上传 拖动.以及 sz下载文件 多舒服 那么 他来了 安装与使用 yum安装 yum -y install lrzsz 使用上传文件,执行命令rz,会跳出文件选择窗口,选 ...

  9. OpenWRT的TTYD终端显示已拒绝连接

    更改openwrt软路由后台管理地址后,发现TTYD终端无法连接,显示已拒绝连接,无法使用的解决方法. 解决方法: 1.使用puty工具连接软路由 2.编辑ttyd配置文件 root@OpenWrt: ...

  10. Programming Abstractions in C阅读笔记:p196

    <Programming Abstractions in C>学习第63天,p196总结.涉及到编程之外的知识,依然是读起来很费劲,需要了解作者在书中提到的人物(Edouard Lucas ...