后端返回文件流时,前端如何处理并成功下载流文件以及解决下载后打开显示不支持此文件格式

这篇具有很好参考价值的文章主要介绍了后端返回文件流时,前端如何处理并成功下载流文件以及解决下载后打开显示不支持此文件格式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、文件和流的关系

文件(File)和流(Stream)是既有区别又有联系的两个概念。

文件 是计算机管理数据的基本单位,同时也是应用程序保存和读取数据的一个重要场所。
      存储介质:文件是指在各种存储介质上(如硬盘、可移动磁盘、CD等)永久存储的数据        的有序集合,它是进行数据读写操作的基本对象。
     特性:每个文件都有文件名、文件所在路径、创建时间及访问仅限等属性。

流 是字节序列的抽象概念,例如文件、输入/输出设备、内部进程通信管道等。流提供一种         向后备存储器写入字节和从后备存储器读取字节的方式。
    存储介质:除了和磁盘文件直接相关的文件流以外,流还有多种类型。流可以分布在网络      中、内存中或者是磁带中。

后端返回文件流时,前端如何处理并成功下载流文件以及解决下载后打开显示不支持此文件格式

 上图类似于乱码,就是文件流在浏览器中的表现形式。

二、前端处理文件流并下载(Vue)

await this.$http
        .request({
          url: `/minioDownload?htitle=${title}`, //这里是你的请求url
          responseType: 'blob', //这里最重要,不要去掉
          method: 'get', //请求方式,看后台的需求,可能是get,post等方式
        })
        .then((res) => {
          console.log(res);
          var elink = document.createElement('a');
          elink.download = name;
          elink.style.display = 'none';
          var blob = new Blob([res], { type: 'application/x-msdownload' });
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          document.body.removeChild(elink);
          this.$message.success(`文件下载成功!`)
        }).catch(err => {
            console.log(err);
        });

设置Content-Type 的值为:application/x-msdownload。Web 服务器需要告诉浏览器其所输出的内容的类型不是普通的文本文件或 HTML 文件,而是一个要保存到本地的下载文件

三、解决下载后打开显示不支持此文件格式

这个问题我也遇到了,在网上也搜了好多资料,才得到答案。

比如:

后端返回文件流时,前端如何处理并成功下载流文件以及解决下载后打开显示不支持此文件格式

是因为在 axios 中对后端的响应做了拦截,所以new Blob([res])中拿到的res实际上是后端接口的  res.data,只不过这一层操作在全局被封装了。

而如果直接使用的$http.get().then(),并未在全局对请求进行封装拦截。所以在这里需要取得的是   res.data    于是,我把new Blob([res])改成new Blob([res.data])后,问题就解决了。文章来源地址https://www.toymoban.com/news/detail-494314.html

到了这里,关于后端返回文件流时,前端如何处理并成功下载流文件以及解决下载后打开显示不支持此文件格式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 前端基于axios请求下载文件(后端返回Blob文件流)

    前端小白第一篇csdn文章就当自己记录学习啦! 我自己遇到的情况写在前面防止有人和我不一样,浪费时间浏览; 调用下载接口后端给我返回的数据格式(即文件流格式)如下: 1.按钮定义点击事件 2.调用后端接口 在使用 axios 请求下载文件 api 接口时,注意区分不同请求方法

    2024年02月11日
    浏览(61)
  • Java后端向前端返回文件流——实现下载功能!

    前端实现文件下载功能有多种方法,这里就不一一介绍,这里只介绍使用文件流下载的实现方法。 既然是文件流那就肯定需要给前端返回一堆二进制编码,作为后端就可以返回一个 OutPutStream 后端可以使用Java中servlet提供的 HttpServletResponse ,核心步骤是要设置响应的数据类型

    2024年02月08日
    浏览(45)
  • Java后端向前端返回文件流——实现下载功能

    前端实现文件下载功能有多种方法,这里就不一一介绍,这里只介绍使用文件流下载的实现方法。 既然是文件流那就肯定需要给前端返回一堆二进制编码,作为后端就可以返回一个 OutPutStream 后端可以使用Java中servlet提供的 HttpServletResponse ,核心步骤是要设置响应的数据类型

    2024年02月11日
    浏览(46)
  • 【前端】根据后端返回的url进行下载并设置文件下载名称

            在我们项目当中存储文件是存储到厂商的服务器上的,然后厂商返回一个可以直接下载url地址,但是前端使用这个url下载的时候永远都是保存一个名字,这时候我们就需要设置文件保存的名称,         那么如何实现呢?使用了fetch将url转换成了blob即可。 代码

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

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

    2024年02月11日
    浏览(55)
  • 前端调接口下载(导出)后端返回.zip压缩文件流(的坑!)

    前言:基于vue2+element-ui的一个后台管理系统,需求评审要加一个导入导出文件的功能,由于可能导出的数据量过大(几十万条数据),下载时间过长,所以用.zip压缩文件替代excel文件 本人以前也做过导出文件的功能,但是用的方法是后端处理数据然后放到另一个服务器上,前

    2024年02月03日
    浏览(48)
  • 前端下载后端返回的文件流,取请求头中的文件名称

    但是用上面的方法发现只能顺利下载文件, res.headers[\\\"content-disposition\\\"] 取不到后端给前端返回的请求头。 通过问题排查发现: 如图,前端需要取的 res.headers 和 res.data 是一层的,当拦截器中返回 res.data 后,就取不到外层的 headers, 因此前端要自己写 axios 请求方法 但是前端依

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

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

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

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

    2024年02月05日
    浏览(76)
  • 后端返回可下载的xlsx文件,但是前端接收下载后为乱码

    我的接收数据进行处理的代码为: 确实可以下载下来,但是打开后为乱码。 解决办法: 后端传的是blob类型文件,所以前端接收时也要限制一下类型, 接收的请求代码配置为: 之后再下载就可以正确显示啦

    2024年02月12日
    浏览(48)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包