前端实现文件下载功能——文件流

这篇具有很好参考价值的文章主要介绍了前端实现文件下载功能——文件流。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端下载文件一般使用的是blob

核心的步骤是获取后端响应的文件流,用blob创建一个临时的URL,然后创建一个隐藏的<a>标签,实现下载需求。

那就先上代码

function download(item) {
    axios.get(getServerUrl() + "/teacher/output/" + classId.value + "/" + item, {
        responseType: 'blob', // 告诉浏览器响应类型是 Blob
    }).then((response) => {
        let blob = new Blob([response.data]);
        // 创建一个临时 URL,用于下载
        const url = URL.createObjectURL(blob);
        let fileName = item + '签到统计表.xls';
        const a = document.createElement('a');
        a.setAttribute('href', url);
        a.setAttribute('download', fileName);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        // 释放临时 URL
        URL.revokeObjectURL(url);
    })
}

如果后端响应的数据是一个二进制数据,那我们就得这是响应类型是blob,否则浏览器会默认按照json解析

至于后端如何向前端以文件流的形式发送文件,请看我的上一个随笔Java后端向前端返回文件流——实现下载功能

是否会有朋友有个疑问,前端要不要在new BLob里面设置content-type,答案是不需要,其实你会发现设置与不设置效果一样,但如果后端没有设置,那么文件下载就会出问题。我之前在写一个web项目要实现一个下载功能,一直以为要前端规定格式,结果后端就没有设置,导致下载的文件格式错误。

所以说,只要后端的文件流正确,响应类型设置正确,前端只需要将responseType设置为blob即可。文章来源地址https://www.toymoban.com/news/detail-678185.html

到了这里,关于前端实现文件下载功能——文件流的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • #vue3 实现前端下载excel文件模板功能

    一、需求: 前端无需通过后端接口,即可实现模板下载功能。 通过构造一个 JSON 对象,使用前端常用的 第三方库 xlsx ,可以直接将该 JSON 对象转换成 Excel 文件,让用户下载模板 二、效果: 三、源码如下:

    2024年01月19日
    浏览(69)
  • Vue3 - 详细实现下载从服务端返回的文件流 Blob 对象教程,前端下载后端接口返回的文件流并自动保存到本地,支持任何格式的文件下载(从后端拿到二进制文件流 Blob 对象,前端实现点击下载功能)

    调用服务端(后端)接口拿到文件流,通过前端下载并保存到本地。 本文 实现了在 vue3 项目中,通过后端接口返回的二进制文件流 Blob 对象,在前端进行点击下载并保存到用户本地,任何格式的文件都可以轻松下载, 保证您直接复制代码,改个请求地址就可以使用了, 如下

    2024年02月04日
    浏览(210)
  • SpringBoot整合hdfs,实现文件上传下载删除与批量删除,以及vue前端发送请求,实现前后端交互功能;

    部分工具类代码参考文章:https://blog.csdn.net/qq_27242695/article/details/119683823 前端实现效果 HDFSController HDFS FileInterface (文件接口) HDFS FileImplService (文件接口实现类) HDFSConfig(从yaml读取文件) HDFSUTils 前端vue代码:

    2024年02月16日
    浏览(84)
  • axios下载csv文件下载-功能实现

    须将axios 配置中的 responseType 设置为 arraybuffer  

    2024年02月05日
    浏览(55)
  • 前端实现下载文件(包含压缩包下载)方式汇总

    默认最简单的下载方式是: window.open(后台接口API路径) ,但该方法弊端:因是新开窗口方式,前端展示上,每次会闪下。 此外,如果使用window.open(文件URL)方式: pdf、office文档、psd:直接下载。 图片、txt:新开窗口预览,不会下载;且txt预览,有时出现中文乱码问题。 一、

    2024年02月10日
    浏览(54)
  • 【Java实战】Feign调用文件下载服务接口实现文件下载功能

    最近需要实现Feign调用服务提供者的文件下载接口,进行文件下载功能,这里对功能的实现做一个简单的记录 通过调用服务提供者的文件下载接口,将文件传输的流数据通过 feign.Response 来接收,服务消费者再将数据转化 首先,在项目中引入Feign的依赖。你可以使用Maven进行管

    2024年02月12日
    浏览(79)
  • 【Java 实现文件下载】vue前端+java后端实现文件下载详解(附源码)

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

    2024年02月09日
    浏览(56)
  • ajax实现下载文件功能

    最近在做下载功能,因为后端需要生成PDF并上传到云服务器,只返回文件的URL,所以百度了很多找到了一个简单的方法. Blob(Binary Large Object)表示二进制类型的大对象。在数据库管理系统中,将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 Ja

    2024年02月15日
    浏览(33)
  • 前端实现下载文件的方法汇总

    对于前端来说,下载文件是一个特别常见的需求。但是前端要根据后端返回的内容,来选择下载文件的具体方法。通常情况下,后端要么给你 返回文件的网络地址 ,要么 返回文件流 。返回地址一般用在静态文件上,比如图片和音视频资源等;返回文件流一般用在动态文件上

    2024年02月09日
    浏览(44)
  • 前端实现下载文件的各种方式

    前端涉及到的文件下载还是很多应用场景的,那么前端文件下载有多少种方式呢?每种方式有什么优缺点呢?下面就来一一介绍。 通过 a 标签的 download 属性来实现文件下载,这种方式是最简单的,也是我们比较常用的方式,先来看示例代码: 就上面的这个示例,我们点击下

    2024年02月16日
    浏览(48)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包