位置: IT常识 - 正文

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

编辑:rootadmin
vue+springboot使用文件流实现文件下载 前言

推荐整理分享vue+springboot使用文件流实现文件下载(vue springboot),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:springboot+vue项目,vue3 springboot,springboot vue3,vue springboot项目,springboot+vue项目,springboot vue3,vue+spring boot,vue+spring boot,内容如对您有帮助,希望把文章链接给更多的朋友!

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

相关vue导出文件

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

步骤文件路径

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

D:\file\文件名称.pdfvue+springboot使用文件流实现文件下载(vue springboot)

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

vue前端代码

前端界面部分,比较简单,就是一个按钮,绑定一个click点击事件方法 本次我使用的框架为elementUI ,其他前端框架也是通用的,最主要是看逻辑部分 具体界面代码如下:

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

最终按钮是这样 然后是JavaScript的逻辑部分 本次JavaScript逻辑有使用axios调用后端,具体如何使用和引入,参照百度

export default { 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 = new Blob([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层import org.springframework.web.bind.annotation.*;import javax.annotation.Resource;import javax.servlet.http.HttpServletResponse;@RestController@RequestMapping("/downFile")public class DownFileController { @Resource private DownFileService downFileService;@GetMapping("/downLoadFile") @PassToken public ResultVO downLoadFile(@RequestParam("path") String path,@RequestParam("name") String name,HttpServletResponse response) throws Exception { return downFileService.downLoadFile(path,name,response); }}service层import org.springframework.stereotype.Service;import javax.servlet.http.HttpServletResponse;import java.io.*;@Servicepublic class DownFileService { public ResultVO downLoadFile(String path,String name,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.setHeader("Access-Control-Expose-Headers", "Content-Disposition"); response.setHeader("Content-Disposition","attachment;filename="+name); 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(); } } return new ResultVO(ResultCode.SUCCESS); }}

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

import lombok.AllArgsConstructor;import lombok.Getter;import lombok.NoArgsConstructor;import lombok.ToString;// 统一响应结果@Getter@NoArgsConstructor@AllArgsConstructor@ToStringpublic class ResultVO<T> { // 响应码 默认1000成功 private int code; // 响应信息 来说明响应情况 private String msg; // 响应的具体数据 private T data; public ResultVO(T data) { this(ResultCode.SUCCESS, data); } public ResultVO(Integer code, String msg, T data) { this.code = code; this.msg = msg; this.data = data; } public ResultVO(ResultCode resultCode, T data) { this.code = resultCode.getCode(); this.msg = resultCode.getMsg(); this.data = data; } public ResultVO(Integer code, String msg) { this.code = code; this.msg = msg; this.data = null; }}import lombok.Getter;/** * 响应码枚举 */@Getterpublic enum ResultCode { 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, "文件上传失败"); private int code; private String msg; ResultCode(int code, String msg) { this.code = code; this.msg = msg; }}

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

结语

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

本文链接地址:https://www.jiuchutong.com/zhishi/298831.html 转载请保留说明!

上一篇:JS获取本机IP地址的方法(js获取本机ip地址)

下一篇:【深度学习】datasets.ImageFolder 使用方法

  • win10进入桌面鼠标消失(win10进入桌面鼠标一直转圈圈怎么办)

    win10进入桌面鼠标消失(win10进入桌面鼠标一直转圈圈怎么办)

  • 快手怎么下载视频到手机(快手怎么下载视频原声)

    快手怎么下载视频到手机(快手怎么下载视频原声)

  • p40多少倍变焦(p40多少倍光学变焦)

    p40多少倍变焦(p40多少倍光学变焦)

  • ipone7plus是否升级13.4(苹果7plus建议升级15吗)

    ipone7plus是否升级13.4(苹果7plus建议升级15吗)

  • hub和交换机区别(hub跟交换机的区别)

    hub和交换机区别(hub跟交换机的区别)

  • synaptics可以卸载吗(synaptics pointing可以卸载吗)

    synaptics可以卸载吗(synaptics pointing可以卸载吗)

  • 腾讯视频上传视频审核要多久(腾讯视频上传视频超过1小时)

    腾讯视频上传视频审核要多久(腾讯视频上传视频超过1小时)

  • amdradeonhd8500m是什么显卡(amdradeonhd8500m是独立显卡吗)

    amdradeonhd8500m是什么显卡(amdradeonhd8500m是独立显卡吗)

  • excel怎么设置行高自动适应(excel怎么设置行高)

    excel怎么设置行高自动适应(excel怎么设置行高)

  • 微信感叹号是拉黑还是删除(微信感叹号消息)

    微信感叹号是拉黑还是删除(微信感叹号消息)

  • 苹果系统不更新有什么坏处(苹果系统不更新怎么去除红点)

    苹果系统不更新有什么坏处(苹果系统不更新怎么去除红点)

  • 抖音里的广告怎么找到(抖音里的广告怎么接的)

    抖音里的广告怎么找到(抖音里的广告怎么接的)

  • 开发者选项关了有影响吗(开发者选项关了还生效吗知乎)

    开发者选项关了有影响吗(开发者选项关了还生效吗知乎)

  • 华为bklal00是哪个型号(华为bklal00是什么型号)

    华为bklal00是哪个型号(华为bklal00是什么型号)

  • 华为微信声音小怎么调大声(oppo手机微信声音小怎么调大声)

    华为微信声音小怎么调大声(oppo手机微信声音小怎么调大声)

  • 华为手机怎样下载铃声(华为手机怎样下载歌曲到u盘)

    华为手机怎样下载铃声(华为手机怎样下载歌曲到u盘)

  • iqooneo855有没有nfc(iqooneo855有没有nfc功能)

    iqooneo855有没有nfc(iqooneo855有没有nfc功能)

  • 新版qq怎么修改群名片(这样修改qq号)

    新版qq怎么修改群名片(这样修改qq号)

  • 华为mate30用的是什么系统(mate30主打什么)

    华为mate30用的是什么系统(mate30主打什么)

  • qq怎么取消佩戴头衔(手机qq怎么取消佩戴头衔)

    qq怎么取消佩戴头衔(手机qq怎么取消佩戴头衔)

  • 电话清单怎么查询(电话清单怎么查询电信)

    电话清单怎么查询(电话清单怎么查询电信)

  • win10双系统修改启动项名称的详细操作教程(win10双系统修改名称)

    win10双系统修改启动项名称的详细操作教程(win10双系统修改名称)

  • win10无法管理员运行cmd解决方法(win10无法以管理员身份运行的原因及解决方法)

    win10无法管理员运行cmd解决方法(win10无法以管理员身份运行的原因及解决方法)

  • 功能强大的Git主题(wordpress主题),完美响应式(git主干)

    功能强大的Git主题(wordpress主题),完美响应式(git主干)

  • 向个人提供居住证明
  • 企业所得税当年销售收入
  • 个体工商户的报税流程
  • 现金股利和现金利润的区别
  • 酒店开办费
  • 暂估库存商品比发票少1分怎么记账
  • 怎么知道购货方电话号码
  • 能从科目余额表入账吗
  • 房地产常用的付款方式有哪三种
  • 抵债资产计提折旧怎么算
  • 固定资产待抵扣进项税率
  • 股权转让收入属于什么
  • 个人保证金业务
  • 印花税要报吗
  • 增值税预征率记忆口诀
  • 100万的收入要交多少
  • 咨询服务税收
  • 买卖投资证券基金怎么进行财税处理?
  • 个人营业执照怎么注销网上申请流程
  • 土地的契税和印花税记入什么科目
  • 单位缴交的社保和医保还要交其他费用吗
  • 零申报资产总额填注册资本怎么办呢
  • 企业合并报表后为何要抵消盈余公积补提?
  • 不开票的收入怎么办
  • 租房押金收不回来怎么做账
  • 此电脑当前不满足运行win11是怎么回事
  • 固定资产减值准备影响折旧吗
  • 企业会计制度政府补助
  • 三星电脑安装系统按哪个键
  • ie浏览器阻止
  • windows11怎么显示我的电脑
  • 笔记本cpu温度高如何处理
  • php 赋值
  • thinkphp5执行流程
  • 企业与员工之间的法律
  • 游戏运营服务是做什么的
  • 结转损益类收入科目
  • 低代码框架开发
  • 微信h5页面设计
  • 教育行业财务处理流程
  • pyqt5如何安装
  • 杀疯了出自哪里
  • 会计分录结转进项怎么算
  • 单位交的那部分医保去哪了
  • springcloud分布式微服务组件
  • python命令行进度条
  • 增值税减免税在贷方
  • 支付水费委托收款
  • 服务型企业要缴哪些税
  • 普通发票一般几个点
  • 旅行社差额征税全额开票和差额开票
  • 应收账款无法收回会计分录
  • 研发支出是什么意思
  • 发票报销抵扣税点是给谁
  • 工程发票入账
  • 个人所得税个人申报和公司申报区别
  • 公司转让二手车需要缴纳什么税
  • mysql的json数据类型
  • Sqlserver聚集索引和非聚集索引的区别
  • ubuntu从u盘安装软件
  • 电脑程序在运行桌面不显示的解决方法
  • win7如何升级win11系统
  • hotkey在哪
  • Centos 6.4 安装dnsmasq的方法
  • win8.1 应用商店是不是不能用了
  • 在vs中搭建opengl环境
  • js创建类对象的方法
  • css控制图片大小和宽度
  • 常用标准化布局标签有哪些?
  • javascript的
  • 安卓拍照闪退
  • python的opencv
  • jquery点击跳转页面
  • 关于草丛:单局游戏内
  • 安康市税务局党玲玲
  • 代理记账广告语怎么写
  • 新加坡国税局的电话号码
  • 税务局实地核查内容
  • 西安市乱占耕地建房
  • 许昌祥和小区二手房出售
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设