【Java 实现文件下载】vue前端+java后端实现文件下载详解(附源码)

这篇具有很好参考价值的文章主要介绍了【Java 实现文件下载】vue前端+java后端实现文件下载详解(附源码)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

写在前面】前端时间总结了一下有关java文件上传的功能,也给不少读者带来一些帮助,因此今天继续完善文件下载这套体系,希望能给屏幕前的您带来实质性的帮助,其实文件下载最怕的就是中文乱码的现象,当然这个我单独写了一篇文章解释,这里不做详谈。
涉及知识点:encode和decode,java文件下载,文件下载中文名乱码,FileInputStream。

实现效果

【Java 实现文件下载】vue前端+java后端实现文件下载详解(附源码)

1、功能分析

首先我们要做的是下载,和导出还是有一点区别的,下载是从目标路径(服务器)将指定的文件下载一份下来到客户端的过程。
所以首先我们必须得知道您要下载的文件存放路径及对应的文件名,这个可以是前端传递,也可以是在接口指定,当然一些固定的模板可以采用接口指定或者配置文件设置,要是一些动态的列表中下载指定的文件的话最好是前端传递。

Java中获取当前class路径的方式如下(我是获取之前上传后文件的路径,基于本地):

String tempName="黄大大的街舞梦.xlsx";
String filePath=this.getClass().getResource("/template/"+tempName).getPath();

网上还有人说要根据不同浏览器的User-Agent属性值来做判断,但是我发现IE,Chrome,Edge都是可行的

2、代码实现

Java实现文件下载我们要从前后端两方面入手,且要确保目标路径下有你要的文件,不然也会下载失败的。

2.1 前端页面搭建(vue)

创建一个节点,主要用于触发文件下载接口,我用的是vant3的按钮,基于click事件进行触发,如下所示:

<van-button type="primary" @click="Download()">下载文件</van-button>

然后再在methods里面封装一个下载的方法,如下所示:

Download() {
      axios
        .get("/Updown/download", { responseType: "blob" })
        .then((response) => {
          console.log(response);
          //headers请求头的乱码数据转换为中文
          const fileName = decodeURI(
            response.headers["content-disposition"].split(";")[1].split("=")[1]
          );
          debugger;
          //下载文件
          let blob = new Blob([response.data], {
            type: "application/vnd.ms-excel",
          });
          let objectUrl = URL.createObjectURL(blob); // 创建URL
          const link = document.createElement("a");
          link.href = objectUrl;
          // link.download = '.xlsx'// 自定义文件名
          //这里是获取后台传过来的文件名
          link.setAttribute("download", fileName);
          link.click(); // 下载文件
          URL.revokeObjectURL(objectUrl); // 释放内存
        })
        .catch((error) => {
          console.log(error);
          alert("下载失败");
        });
    },

只有这个方法就可以实现下载功能

前端划重点

请求方式:get的方式(post方式暂时没有实测,后续更新)
响应类型:responseType: “blob”,二进制大对象类型,存储大量的二进制和文本的容器。
编码转换:decodeURI,主要是和java的encode对应,因为中文名需要转一下,不然乱码。

2.2 后台接口实现(java)

Java下载文件其核心在于FileInputStream文件字节输入流,也就是将文件变成机器识别的字节,然后通过read方法,从文件的第一个字节开始,read方法每执行一次,就会将一个字节读取,并返回该字节ASCII码。
另外针对中文我们要加一个encode的编码处理,方便传输不会出现中文名乱码的现象。
Java实现核心代码如下:

int len = filePath.lastIndexOf("/");
if (StringUtils.isBlank(filePath) || len == -1) {
    throw new Exception("未上传文件!");
}
String fileName = filePath.substring(len + 1);
File file = new File(filePath);
if (!file.exists()) {
    throw new Exception("文件不存在!");
}
fileName = URLEncoder.encode(fileName, "UTF-8");
try {
    response.setHeader("Content-disposition","attachment; filename="+ fileName);
    response.setContentType("application/vnd.ms-excel");
    response.setCharacterEncoding("UTF-8");
    OutputStream out = response.getOutputStream();
    BufferedInputStream fin = new BufferedInputStream(new FileInputStream(file));
    try {
        byte[] content = new byte[1024];
        int length;
        while ((length = fin.read(content, 0, content.length)) != -1) {
            out.write(content, 0, length);
        }
    } catch (Exception e) {
        logger.error(e.getMessage(), e);
        logger.info("文件下载失败", e.getMessage());
        throw e;
    } finally {
        fin.close();
        out.flush();
        out.close();
    }
} catch (Exception e) {
    logger.error(e.getMessage(), e);
    throw e;
}

3、常见问题

3.1 下载失败

路径问题:首先确定路径是对的,可以在后端打个断点看filePath是否能在本地找到,不能找到肯定会导致失败的。
请求方式问题:请求方式是否前后端统一,别前端用了post后端用了get,这样会导致接口调用失败报错。

3.2 下载中文名乱码、中文名下划线、中文名百分号等现象。

编码转码问题:这个说明接口通的,也能实现java文件下载了,但是中文名没有进行encode编码和decode转码的步骤,所以这个时候应该好好排查一下java的编码和vue的转码。

4、皇榜彩蛋

倾心打造佳作,愿解君之惑,如若有幸,盼君上榜助阵,特此敬谢!
皇榜入口点击此处
文章来源地址https://www.toymoban.com/news/detail-487399.html

到了这里,关于【Java 实现文件下载】vue前端+java后端实现文件下载详解(附源码)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端发送请求获取后端文件,并且前端实现下载文件功能

    最近遇到一个需求,就是前端发送post请求获取后端的excel文件,并且前端实现下载导出到本地的功能。 前端页面就长上面那样,一个批量导出功能,用户勾选之后,前端通过接口把id和其他的参数传给后端,接口调用方法这里需要注意的是,这里必须设置responseType: ‘blob’

    2024年02月09日
    浏览(45)
  • Vue实战【后端返回文件流时,前端如何处理并成功下载流文件】

    哈喽小伙伴们,在我们日常工作当中,大家一定会遇到 文件导出 这样的功能需求点;导出功能前端后端都可以实现,通常情况下呢是由我们后端同事去处理的,那么当我们后端同事给你返回文件流的时候,前端要怎么处理并且完成下载呢?今天就给大家说个简单的方法,我

    2024年02月11日
    浏览(42)
  • vue 中从后端获取到文件的 url 地址,前端根据 url 地址下载文件

    项目用的是 vben admin 框架,用的是 vue3 + TS 项目需求数据导出功能,前端需要实现文件下载功能 后端返回的是文件的 url 地址 (本项目中返回的是阿里云 oss 的文件地址) 从后端得到的是一个 url 地址,先通过 fetch api 请求这个 url 地址并转换成 blob 对象,通过 URL.createObjectUrl() 将 blo

    2024年02月06日
    浏览(46)
  • java实现文件的上传和下载,将文件流转base64返回给前端

    上传代码 文件下载代码 后端通过json拿到文件流的返回,我采用将文件流转成base64返回给前台,实现代码如下:

    2024年02月13日
    浏览(58)
  • vue 后端返回二进制流-前端通过blob对象下载文件-图片

    前言 在实际开发中我们经常会遇见下载文件的场景,比如下载合同,下载文件 下载文件有2种方式,一种是后端返回二进制流,前端通过blob对象接受根据不同类型下载 还有一种把地址直接在浏览器新窗口打开浏览器打开pdf可以预览和下载,其他文件直接下载 但不管是那种方

    2024年02月05日
    浏览(80)
  • 后端:使用easyExcel实现解析Excel文件读取数据。前端:Excel模板下载、前端上传文件

            本篇是EasyExcel快速入门知识,讲解如何读取Excel文件,对Excel中错误信息如空字符、必填项为空、表格格式校验做到处理 ,并给出了实际项目中示例代码;为什么要使用easyexcel;原因是相比于poi,easyexcel更加轻量级,读取写入API方便,并且在工作中占用内存较小;

    2024年02月05日
    浏览(74)
  • 前端实现文件下载的方法;以及后端返回 blob 文件流,进行展示。

    前端下载一般分为两种情况,一种是后端直接给一个文件地址,通过浏览器打开就可以下载,另外一种则需要发送请求,后端返回二进制流数据,前端解析流数据,生成URL,实现下载。 通过a标签的download属性来实现文件下载,这种方式是最简单的,也是比较常用的方式,先来

    2024年02月06日
    浏览(55)
  • 后端返回文件流,前端怎么导出、下载(8种方法可实现)

    在前端导出和下载后端返回的文件流时,可以使用以下几种方法: 使用 window.open() 方法: 在前端使用 window.open() 方法打开一个新的窗口或标签页,并将后端返回的文件流作为URL传递给该方法。浏览器会自动下载该文件。 例如: window.open(\\\'http://example.com/download\\\', \\\'_blank\\\'); 使用

    2024年02月11日
    浏览(58)
  • 【java】java实现大文件的分片上传与下载(springboot+vue3)

    源码: https://gitee.com/gaode-8/big-file-upload 演示视频 https://www.bilibili.com/video/BV1CA411f7np/?vd_source=1fe29350b37642fa583f709b9ae44b35 对于超大文件上传我们可能遇到以下问题 • 大文件直接上传,占用过多内存,可能导致内存溢出甚至系统崩溃 • 受网络环境影响,可能导致传输中断,只能重

    2024年02月02日
    浏览(61)
  • java下载指定文件并返回给前端返回流文件

    java下载返回文件流的实现 作为一名经验丰富的开发者,我将教会你如何实现Java下载返回文件流的功能。在这篇文章中,我将分为以下几个部分来详细介绍这个过程: 1.简介 2.实现步骤 3.代码示例 4.总结 在Java开发中,有时候我们需要实现文件下载功能,并且将文件以流的形

    2024年03月15日
    浏览(71)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包