vue+springboot使用文件流实现文件下载

前言

本次将使用vue和springboot通过文件流的方式教大家怎么去实现文件的下载，那么话不多说，我们直接开始

相关vue导出文件

以下链接为我其他vue进行下载导出文件文章
vue实现把字符串导出为txt

步骤

文件路径

要进行下载的话，我们肯定是需要一个路径进行获取到我们的文件的，那么本次我们的文件路径是这样:

D:\file\文件名称.pdf

ps:

文件名称.pdf是我进行上传的文件，D：\file\是我本地D盘下的磁盘路径
本次是在文件上传成功的基础上进行的
另外，如果希望知道怎么上传文件可以参考我的文章:
elementUI加springboot实现上传excel文件给后端并读取excel

vue前端代码

前端界面部分，比较简单，就是一个按钮，绑定一个click点击事件方法
本次我使用的框架为

elementUI

，其他前端框架也是通用的，最主要是看逻辑部分
具体界面代码如下:

<template><div><el-buttonsize="medium"type="success"plain@click="downLoadFile">下载</el-button></div></template>

最终按钮是这样

然后是JavaScript的逻辑部分
本次JavaScript逻辑有使用

axios

调用后端，具体如何使用和引入，参照百度

exportdefault{name:"xxx",data(){return{filePath:'D:\file\文件名称.pdf',// 文件路径fileName:'文件名称.pdf',// 文件名称}},methods:{// 下载文件方法downLoadFile(){this.$axios.get("/downFile/downLoadFile",{params:{path:this.filePath,name:this.fileName
              },responseType:'blob'}).then(res=>{const blob =newBlob([res.data]);const fileName = res.headers["content-disposition"].split(";")[1].split("filename=")[1];if('download'in document.createElement("a")){const link = document.createElement("a");
                link.download = fileName;
                link.style.display ='none';
                link.href =URL.createObjectURL(blob);
                document.body.appendChild(link);
                link.click();URL.revokeObjectURL(link.href);
                document.body.removeChild(link);}else{
                navigator.msSaveBlob(blob, fileName);}})}},}

ps：

这边需要重点提一下，上面的代码

params：

需要传的参数，本次上传到的是路径和文件名称

responseType

我们申明一个blob的文件流的请求类型，让后端返回一个blob流文件，前端接收

res :

后端返回结果，可能被包了几层消息请求，根据实际的请求是决定是res.data或res.data.data或其他

res.headers["content-disposition"]

：这里是由后端暴露一个请求头content-disposition，如果你能够直接知道文件名称，后端的暴露请求头步骤可以直接省略

document.createElement("a")

: 通过创建一个< a>< /a>的标签，将文件流填入到a标签的url路径的方式把文件下载下来

后端代码

controller层

importorg.springframework.web.bind.annotation.*;importjavax.annotation.Resource;importjavax.servlet.http.HttpServletResponse;@RestController@RequestMapping("/downFile")publicclassDownFileController{@ResourceprivateDownFileService downFileService;@GetMapping("/downLoadFile")@PassTokenpublicResultVOdownLoadFile(@RequestParam("path")String path,@RequestParam("name")String name,HttpServletResponse response)throwsException{return downFileService.downLoadFile(path,name,response);}}

service层

importorg.springframework.stereotype.Service;importjavax.servlet.http.HttpServletResponse;importjava.io.*;@ServicepublicclassDownFileService{publicResultVOdownLoadFile(String path,String name,HttpServletResponse response){File file =newFile(path);byte[] buffer =newbyte[1024];BufferedInputStream bis =null;OutputStream os =null;try{//文件是否存在if(file.exists()){//设置响应
                response.setContentType("application/octet-stream;charset=UTF-8");
                response.setHeader("Access-Control-Expose-Headers","Content-Disposition");
                response.setHeader("Content-Disposition","attachment;filename="+name);
                response.setCharacterEncoding("UTF-8");
                os = response.getOutputStream();
                bis =newBufferedInputStream(newFileInputStream(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();}}returnnewResultVO(ResultCode.SUCCESS);}}

其中我的返回值ResultVO是一个自定义返回值，如需要，具体的代码如下:

importlombok.AllArgsConstructor;importlombok.Getter;importlombok.NoArgsConstructor;importlombok.ToString;// 统一响应结果@Getter@NoArgsConstructor@AllArgsConstructor@ToStringpublicclassResultVO<T>{// 响应码 默认1000成功privateint code;// 响应信息 来说明响应情况privateString msg;// 响应的具体数据privateT data;publicResultVO(T data){this(ResultCode.SUCCESS, data);}publicResultVO(Integer code,String msg,T data){this.code = code;this.msg = msg;this.data = data;}publicResultVO(ResultCode resultCode,T data){this.code = resultCode.getCode();this.msg = resultCode.getMsg();this.data = data;}publicResultVO(Integer code,String msg){this.code = code;this.msg = msg;this.data =null;}}

importlombok.Getter;/**
 * 响应码枚举
 */@GetterpublicenumResultCode{SUCCESS(1000,"操作成功"),FAILED(1001,"响应失败"),VALIDATE_FAILED(1002,"参数校验失败"),NO_RESULT(1003,"未查询到相关信息"),MES_ERROR(1004,"未查询到相关信息"),NO_AUTHORITY(1005,"无权限"),DATA_EXIST(1006,"数据已存在"),ERROR(5000,"未知错误"),FILE_UPLOAD_ERROR(5001,"文件上传失败");privateint code;privateString msg;ResultCode(int code,String msg){this.code = code;this.msg = msg;}}

以下截图为我下载成功的截图文件

结语

以上就是我vue+springboot使用文件流实现文件下载的具体步骤