前端文件导出设置responseType为blob时遇到的问题

这篇具有很好参考价值的文章主要介绍了前端文件导出设置responseType为blob时遇到的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、当我们前端调用导出文件接口时,一般情况都会在请求里添加responseType为blob

 

前端文件导出设置responseType为blob时遇到的问题

前几天遇到一个问题,后端人员 的这个接口会分别出现两种情况:

1、当导出接口请求正常时,我们前端会收到一个文件流如下图

前端文件导出设置responseType为blob时遇到的问题

 这时我们打印一下接口返回的数据类型,发现接口会返回一个blob类型的数据,并且blob中属性type是application/vnd.ms-excel,这就说明我们导出的文件类型是excel格式的。如下图 前端文件导出设置responseType为blob时遇到的问题

BLOB (binary large object)----二进制大对象,是一个可以存储二进制文件的容器。

说白了blob就是一个二进制的对象,我们可以通过这个blob对象直接读取文件内容,但是这时多次一举,我们只需要把相应的blob对象直接以a标签导出就可以了,如下图:

前端文件导出设置responseType为blob时遇到的问题

 2、当导出接口数据过多后端抛出异常时,如下图 

这时我们在浏览器控制台打印出结果,返现结果还是一个blob对象,但是type变成application/json前端文件导出设置responseType为blob时遇到的问题 

我们想要得到接口返回的结果,需要对blob对象进行文件读取,我们需要用到FileReader

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

我们可以根据blob对象的type属性来判断,当type为application/json时,接口返回的时一个json对象

前端文件导出设置responseType为blob时遇到的问题

其中reader.result就是接口返回的结果,是一个json字符串需要转换成对象。 文章来源地址https://www.toymoban.com/news/detail-461892.html

到了这里,关于前端文件导出设置responseType为blob时遇到的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 文件流下载之——axios请求responseType为blob时,错误数据处理

    背景:一个文件下载的需求,如果成功下载data数据返回的是文件流,如果失败后端会返回失败信息,类似{code: -1, data: null, msg: ‘xxx’}。然而如果用responseType: \\\'blob’去接文件流的话,返回的错误信息也会转为blob数据格式。我们需要对返回错误信息的数据做处理,页面上提示

    2024年02月13日
    浏览(46)
  • 纯前端导出,设置导出xlsx文件样式xlsx-js-style

    设置导出的表格样式,xlsx-js-style!真的绝绝子! 1.下载xlsx-js-style依赖 2.在main.js中挂载到vue原型上,方便使用  3.页面具体写法 参考:前端根据后端返回数据导出指定样式的表格(xlsx-js-style)_前端excel导出指定格式-CSDN博客

    2024年01月17日
    浏览(32)
  • 前端下载文件(Blob)的几种方式使用Blob下载文件

    在前端下载文件是个很通用的需求,一般后端会提供下载的方式有两种: 1.直接返回文件的网络地址(一般用在静态文件上,比如图片以及各种音视频资源等) 2.返回文件流(一般用在动态文件上,比如根据前端选择,导出不同的统计结果 excel 等) 第一种方式比较简单,但

    2024年02月07日
    浏览(44)
  • 基于SpringBoot + EasyExcel + Vue + Blob实现导出Excel文件的前后端完整过程

    首先前端发起HTTP请求之后,后端返回一个Excel输出流,然后前端用Blob类型接收数据,并且解析响应头数据以及提取源文件名,最后用a标签完成下载。 一、后端代码 (1)导入阿里巴巴的EasyExcel依赖(pom.xml) (2)控制层(GameController.java) (3)接口层(IGameService.java) (4)

    2024年02月16日
    浏览(30)
  • 前端下载文件的几种方式使用Blob下载文件

    前端下载文件的几种方式 使用Blob下载文件 在前端下载文件是个很通用的需求,一般后端会提供下载的方式有两种: 1.直接返回文件的 网络地址 (一般用在静态文件上,比如图片以及各种音视频资源等) 2.返回 文件流 (一般用在动态文件上,比如根据前端选择,导出不同的

    2024年02月05日
    浏览(34)
  • 前端基于axios请求下载文件(后端返回Blob文件流)

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

    2024年02月11日
    浏览(39)
  • 后端返回数据流,前端进行转换blob文件流

    1. 首先相应的头里面请求改为 responseType: \\\'blob\\\' 2.           let res = await getPhotoVideoUrl() --此处为模拟的获取一个视频流的地址;         const img = new Blob([res], { type: \\\'image/png\\\' });         let imgUrl = window.URL.createObjectURL(img); 3.拿到流的地址后,先进行new Blob进行创建一个对象。

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

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

    2024年02月06日
    浏览(36)
  • 解决axios请求文件流前端通过new Blob完成文件流下载文件打不开

    目录 1.首先请求封装axios的请求方式 2.根据接口文档查看文件流的请求类型 3.请求Methods 4.以上写完以后,好消息是文件可以成功下载 4.1坏消息是文件竟然是个损坏文件打不开,修复了也是乱码 5.解决问题 5.1 前端做文件下载有很多方式,前端返回文件流需要我们在axios请求封

    2024年04月25日
    浏览(27)
  • 【前端】Vue之使用new Blob() 实现不同类型的文件下载

            在 Vue 项目实际开发过程中,经常需要对各种各样的类型进行下载,因为我不是前端出生,就自己在网上学习最后使用到自己的项目当中,代码冗余等低级错误还请多多指导。我发现用 Blob 二进制进行文件下载的比较多,我就采用了这一方式。         下面是一

    2024年03月20日
    浏览(39)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包