使用Vue和Spring Boot实现文件下载

推荐：Vue学习汇总

使用Vue和Spring Boot实现文件下载

推荐

使用Vue和Spring Boot实现文件上传。

前端

这里介绍三种方式来实现文件下载，跨域问题在后端会进行处理，这个例子是下载MP4文件，我这里是直接使用HTML来写前端，如果用Vue来写，可能要防止mockjs对请求的responseType产生影响（mockjs会创建一个新的XMLHttpRequest对象，并且有着自己的原始配置。所以导致覆盖了axios的配置，如responseType等）。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>download</title><script src="./js/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="div"><div class="download"><a href="http://localhost:8081/file/download/VID_20200719_094121.mp4">download - a</a><br><button @click="downloadBnt">download - window</button><br><button @click="downloadReq">download - request</button></div>
</div>
</body>
</html>
<script>var vue = new Vue({el: '#div',methods: {downloadBnt(){window.open("http://localhost:8081/file/download/VID_20200719_094121.mp4", '_blank');},downloadReq(){axios.get('http://localhost:8081/file/download/VID_20200719_094121.mp4',{responseType: 'blob'}).then((res)=>{console.log('文件下载成功');const blob = new Blob([res.data]);const fileName = "VID_20200719_094121.mp4";//对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性//IE10以上支持blob，但是依然不支持downloadif ('download' in document.createElement('a')) {//支持a标签download的浏览器const link = document.createElement('a');//创建a标签link.download = fileName;//a标签添加属性link.style.display = 'none';link.href = URL.createObjectURL(blob);document.body.appendChild(link);link.click();//执行下载URL.revokeObjectURL(link.href); //释放urldocument.body.removeChild(link);//释放标签} else {navigator.msSaveBlob(blob, fileName);}}).catch((res)=>{console.log('文件下载失败');});}}})
</script>

后端

@CrossOrigin注解用于解决跨域问题。

package com.kaven.system.controller;import org.springframework.web.bind.annotation.*;import javax.servlet.http.HttpServletResponse;
import java.io.*;@RestController
@RequestMapping("/file")
@CrossOrigin
public class FileController {@GetMapping("/download/{path}")public void download(@PathVariable("path") String path ,HttpServletResponse response){File file = new File("C:\\Users\\Kaven\\Desktop\\images\\" + path);byte[] buffer = new byte[1024];BufferedInputStream bis = null;OutputStream os = null;try {//文件是否存在if (file.exists()) {//设置响应response.setContentType("application/octet-stream;charset=UTF-8");response.setCharacterEncoding("UTF-8");os = response.getOutputStream();bis = new BufferedInputStream(new FileInputStream(file));while(bis.read(buffer) != -1){os.write(buffer);}}} catch (Exception e) {e.printStackTrace();} finally {try {if(bis != null) {bis.close();}if(os != null) {os.flush();os.close();}} catch (IOException e) {e.printStackTrace();}}}
}

测试

第一种方法。

第二种方法。

第三种方法。

下载到桌面。

下载其他格式文件

前端改一下请求路径，下载png文件，后端不需要改。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>download</title><script src="./js/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="div"><div class="download"><a href="http://localhost:8081/file/download/kaven.top.png">download - a</a><br><button @click="downloadBnt">download - window</button><br><button @click="downloadReq">download - request</button></div>
</div>
</body>
</html>
<script>var vue = new Vue({el: '#div',methods: {downloadBnt(){window.open("http://localhost:8081/file/download/kaven.top.png", '_blank');},downloadReq(){axios.get('http://localhost:8081/file/download/kaven.top.png',{responseType: 'blob'}).then((res)=>{console.log('文件下载成功');const blob = new Blob([res.data]);const fileName = "kaven.top.png";//对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性//IE10以上支持blob，但是依然不支持downloadif ('download' in document.createElement('a')) {//支持a标签download的浏览器const link = document.createElement('a');//创建a标签link.download = fileName;//a标签添加属性link.style.display = 'none';link.href = URL.createObjectURL(blob);document.body.appendChild(link);link.click();//执行下载URL.revokeObjectURL(link.href); //释放urldocument.body.removeChild(link);//释放标签} else {navigator.msSaveBlob(blob, fileName);}}).catch((res)=>{console.log('文件下载失败');});}}})
</script>

测试了视频、图片、Word、Excel这四种文件格式，都是可以正常下载。

其他文件格式就不测试了。

评论中的问题

一、path为文件路径。
前端：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>download</title><script src="./js/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="div"><div class="download"><button @click="downloadReq">download - request</button></div>
</div>
</body>
</html>
<script>var vue = new Vue({el: '#div',methods: {downloadReq(){axios.get('http://localhost:8081/file/download',{params:{path: 'C:/Users/Kaven/Desktop/images/VID_20200120_203552.mp4'},responseType: 'blob'}).then((res)=>{console.log('文件下载成功');const blob = new Blob([res.data]);const fileName = "VID_20200120_203552.mp4";//对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性//IE10以上支持blob，但是依然不支持downloadif ('download' in document.createElement('a')) {//支持a标签download的浏览器const link = document.createElement('a');//创建a标签link.download = fileName;//a标签添加属性link.style.display = 'none';link.href = URL.createObjectURL(blob);document.body.appendChild(link);link.click();//执行下载URL.revokeObjectURL(link.href); //释放urldocument.body.removeChild(link);//释放标签} else {navigator.msSaveBlob(blob, fileName);}}).catch((res)=>{console.log('文件下载失败');});}}})
</script>

后端：

package com.kaven.system.controller;import org.springframework.web.bind.annotation.*;import javax.servlet.http.HttpServletResponse;
import java.io.*;@RestController
@RequestMapping("/file")
@CrossOrigin
public class FileController {@GetMapping("/download")public void download(@RequestParam("path") String path ,HttpServletResponse response){File file = new File(path);byte[] buffer = new byte[1024];BufferedInputStream bis = null;OutputStream os = null;try {//文件是否存在if (file.exists()) {//设置响应response.setContentType("application/octet-stream;charset=UTF-8");response.setCharacterEncoding("UTF-8");os = response.getOutputStream();bis = new BufferedInputStream(new FileInputStream(file));while(bis.read(buffer) != -1){os.write(buffer);}}} catch (Exception e) {e.printStackTrace();} finally {try {if(bis != null) {bis.close();}if(os != null) {os.flush();os.close();}} catch (IOException e) {e.printStackTrace();}}}
}

测试：

MP4文件可以正常下载，其他文件格式就不进行测试了，应该是没问题的。

二、文件名称由后端定义，并且传给前端。

前端：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>download</title><script src="./js/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="div"><div class="download"><button @click="downloadReq">download - request</button></div>
</div>
</body>
</html>
<script>var vue = new Vue({el: '#div',methods: {downloadReq(){axios.get('http://localhost:8081/file/download',{params:{path: 'C:/Users/Kaven/Desktop/images/VID_20200120_203552.mp4'},responseType: 'blob'}).then((res)=>{console.log('文件下载成功');const blob = new Blob([res.data]);// 获取文件名称const fileName = res.headers['content-disposition'].split(";")[1].split("filename=")[1];//对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性//IE10以上支持blob，但是依然不支持downloadif ('download' in document.createElement('a')) {//支持a标签download的浏览器const link = document.createElement('a');//创建a标签link.download = fileName;//a标签添加属性link.style.display = 'none';link.href = URL.createObjectURL(blob);document.body.appendChild(link);link.click();//执行下载URL.revokeObjectURL(link.href); //释放urldocument.body.removeChild(link);//释放标签} else {navigator.msSaveBlob(blob, fileName);}}).catch((res)=>{console.log('文件下载失败');});}}})
</script>

// 获取文件名称
const fileName = res.headers['content-disposition'].split(";")[1].split("filename=")[1];

后端：

package com.kaven.system.controller;import org.springframework.web.bind.annotation.*;import javax.servlet.http.HttpServletResponse;
import java.io.*;@RestController
@RequestMapping("/file")
@CrossOrigin
public class FileController {@GetMapping("/download")public void download(@RequestParam("path") String path ,HttpServletResponse response){File file = new File(path);// 文件名称String filename = file.getName();byte[] buffer = new byte[1024];BufferedInputStream bis = null;OutputStream os = null;try {//文件是否存在if (file.exists()) {//设置响应response.setContentType("application/octet-stream;charset=UTF-8");// 将响应头中的Content-Disposition暴露出来，不然前端获取不到response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");// 在响应头中的Content-Disposition里设置文件名称response.setHeader("Content-Disposition","attachment;filename="+filename);os = response.getOutputStream();bis = new BufferedInputStream(new FileInputStream(file));while(bis.read(buffer) != -1){os.write(buffer);}}} catch (Exception e) {e.printStackTrace();} finally {try {if(bis != null) {bis.close();}if(os != null) {os.flush();os.close();}} catch (IOException e) {e.printStackTrace();}}}
}

// 将响应头中的Content-Disposition暴露出来 ， 不然前端获取不到
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
// 在响应头中的Content-Disposition里设置文件名称
response.setHeader("Content-Disposition","attachment;filename="+filename);

测试：

MP4文件可以正常下载，其他文件格式就不进行测试了，应该是没问题的。

使用Vue和Spring Boot实现文件下载就介绍到这里。

写博客是博主记录自己的学习过程，如果有错误，请指正，谢谢！

使用Vue和Spring Boot实现文件下载相关推荐

vue分页+spring boot +分页插件pagehelper
vue分页+spring boot +分页插件pagehelper https://blog.csdn.net/baidu_38603246/article/details/98854013
视频教程-Vue、Spring Boot开发小而完整的Web前后端分离项目实战-Java
Vue.Spring Boot开发小而完整的Web前后端分离项目实战 3年多.net开发经验:5年的java后端开发经验,熟悉行.net,java流行技术,拥有多个.net,java web企业级应; ...
Vue与Spring boot基于RSA非对称加密进行前后端交互
当处理大型的系统项目,或者保密性要求高的项目.是要解除一些加密算法的,非对称加密肯定比对称加密更加安全,但是也更消耗性能.这里就展示一下前端使用Vue,后端使用Spring boot的情况下,进行前后 ...
基于Vue和Spring Boot的在线点餐系统设计与实现
目录需求分析 1 1 需求概述 2 文档介绍 2 1.1 文档目的 2 1.2 读者对象 2 1.3 参考文档 2 1.4 原始功能需求 2 1.5 非功能性需求 2 2 用例模型 3 2.1 用例 ...
Spring Boot 所有文件下载，图片下载加水印
一.图片的预览和文件的下载,用FreeMaork不用写代码就可以轻松搞定,template-loader-path是文件的位置,可以添加多个文件访问地址,用逗号隔开. spring:resources ...
vue ivew + spring boot合并pdf文件
maven依赖 <dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf</ ...
Spring Boot入门（11）实现文件下载功能
在这篇博客中,我们将展示如何在Spring Boot中实现文件的下载功能. 还是遵循笔者写博客的一贯风格,简单又不失详细,实用又能让你学会. 本次建立的Spring Boot项目的主要功能 ...
Spring Boot基础学习笔记15：实现文件下载功能
文章目录零.学习目标一.文件下载概述二.实现文件下载功能 (一)创建Spring Boot项目 (二)整合Bootstrap (三)准备待下载文件 (四)编写文件下载页面 (五)编写文件下载控制 ...
Vue + Spring Boot 项目实战（四）：数据库的引入
这一篇的主要内容是引入数据库并实现通过数据库验证用户名与密码. 本篇目录一.引入数据库 1.安装数据库 2.使用 Navicat 创建数据库与表二.使用数据库验证登录 1.项目相关配置 2.登录控 ...

使用Vue和Spring Boot实现文件下载

使用Vue和Spring Boot实现文件下载

使用Vue和Spring Boot实现文件下载相关推荐

最新文章

热门文章