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

已于 2022-02-09 21:00:47 修改
阅读量1w 收藏 57
点赞数 8
分类专栏： 后端框架 前端框架 文章标签： java spring vue.js html 前端
于 2020-11-11 23:21:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37960603/article/details/109626803
版权

推荐：Vue学习汇总

使用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，但是依然不支持download
                    if ('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); //释放url
                        document.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，但是依然不支持download
                    if ('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); //释放url
                        document.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，但是依然不支持download
                    if ('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); //释放url
                        document.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，但是依然不支持download
                    if ('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); //释放url
                        document.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实现文件下载就介绍到这里。

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

ITKaven
关注
专栏目录
springboot+vue实现文件上传下载
01-18
本文实例为大家分享了springboot+vue实现文件上传下载的具体代码，供大家参考，具体内容如下 一、文件上传（基于axios的简单上传） 所使用的技术：axios、springboot、vue; 实现思路：通过h5 ：input元素标签进行选择文件，获取所选选择的文件路径，new fromdata对象，设置fromdata的参数，设置axios对应的请求头，最后通过axios发送post请求后端服务。后端服务同过MultipartFile进行文件接收。具体代码如下： 前端代码： 1、创建vue对象 import Vue from 'vue' import App from './Ap
Vue调用SpringBoot后台实现文件下载功能
04-02
该案例实现前端Vue通过axios请求SpringBoot后台，实现文件下载功能。 filepack ： 前端项目 8081端口。 fileServer： 后端项目 8080端口。
vue+Springboot实现文件下载
最新发布
m0_73463767的博客
08-20 279
【代码】vue+Springboot实现文件下载。
axios请求封装
为技术而生
06-27 351
axios请求封装
vue+springboot使用文件流实现文件下载
xc9711的博客
10-24 9504
本次将使用vue和springboot通过文件流的方式教大家怎么去实现文件的下载
vue + springboot 文件下载，笔记
cscscssjsp的博客
12-27 813
前言： 前端项目基于vue的，后端是springboot，文件上传后保存在文件服务器，同时文件服务器返回文件的访问路径， 当需要下载时，为了不让每个人都能通过页面a标签点击链接直接保存到本地，所以采用后台临时下载，返回文件流给前端，前端解析文件流，通过浏览器下载到浏览器存储目录中 1.用户点击请求下载文件 2.后端根据请求中的URL路径使用Java NIO下载文件，临时保存到下载服务...
二进制流文件上传下载( springboot+vue).html
04-13
采用springboot + vue的技术模式，实现了文件的上传和下载，在页面上跟简洁直观的体现，在代码中也是少量代码实现复杂功能。
《Vue Spring Boot前后端分离开发实战》源码Vue+Spring Boot前后端分离开发实战教学课件（PPT）
08-09
10. **WebSocket**：如果应用需要实时通信，Vue和Spring Boot可以结合WebSocket实现双向通信。Spring框架提供了WebSocket的支持，Vue.js则有相应的WebSocket库如vue-websocket。 通过这套源码的学习，开发者可以...
基于Vue和Spring Boot的校园记录管理Web App的设计与实现.pdf
08-26
本文旨在设计和实现基于Vue和Spring Boot的校园记录管理Web App，以解决当前校园记录管理app的高开发成本和功能不齐全的问题。该系统采用Vue和Spring Boot框架，充分利用HTML5的优点，提高了用户体验度和性能效率。...
使用Vue+Spring Boot实现Excel上传功能
08-26
使用Vue+Spring Boot实现Excel上传功能 在本文中，我们将介绍如何使用Vue+...使用Vue+Spring Boot实现Excel上传功能可以很方便地实现Excel文件的上传和处理。整个过程包括前端部分的Excel上传和后端部分的文件处理。
毕设&课设&项目&实训-基于Vue+Spring boot实现的在线直播教学平台.zip
03-01
毕设&课设&项目&实训-基于Vue+Spring boot实现的在线直播教学平台.zip这是一款基于Vue+Spring boot实现的在线直播教学平台，是个人的毕业设计。该项目完成了屏幕分享、音视频分享、随机抽查、教学监督、身份验证、...
SpringBoot+Vue
07-24
SpringBoot+Vue 实现的前后端分离技术，感谢代码技术的编写者，看了之后学到了很多，建议可以看看。Vue是建立在node.js环境搭好的情况下运行，里面有一个自己整理的Vue环境搭建文档，希望可以帮到，有什么问题望大家告知，一起学习
springboot整合vue实现上传下载文件
08-25
主要为大家详细介绍了springboot整合vue实现上传下载文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
spring-boot-blueprint：使用Keycloak和Vue.js的Spring Boot蓝图
02-06
该项目旨在为使用Spring Boot和Vue.js构建和部署全栈Web应用程序提供一个非常少见但具有现代功能的完整蓝图。 该蓝图对于希望使用合理的默认值开始构建Web应用程序但又希望保持灵活性的人们很有用。 因此，此蓝图...
SpringBoot+Vue实现文件的下载（文件存储在云上）
weixin_48469176的博客
08-23 1080
SpringBoot+Vue实现文件的下载（文件存储在云上）以及批量下载文件实现
spring boot + vue 前后端下载文件文件
weixin_42382758的博客
09-28 3988
java前后端文件交互
springboot + vue 文件下载
hate_coriander的博客
10-25 372
后端代码 /** * 文件下载 * @param filePath 文件名/文件根路径+文件名 如 test\test.docx * @param uploadpath 文件存储路径 如： d:\temp * @param uploadType 本地文件传 local * @param response */ public void viewAndDownload(String filePath, String uploadpath, String uploadType, HttpServletRes
Springboot+vue实现文件上传下载
wgq2020的博客
11-10 901
Springboot+vue实现文件上传下载
vue+springboot实现文件下载
ChenJin_2的博客
04-17 323
vue+springboot实现文件下载
评论 21
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ITKaven

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值