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

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

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

import { Message } from 'element-ui';

const mimeMap: any = {
  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  zip: 'application/zip'
};
/**
 * 解析blob响应内容并下载
 * @param {*} res blob响应内容
 * @param {String} mimeType MIME类型
 */
export function resolveBlob(res: any, mimeType: string) {
  try {
  	// 对错误数据的处理
    if (res.data.type === 'application/json') {
      const fileReader = new FileReader();
      fileReader.readAsText(res.data, 'utf-8');
      fileReader.onload = function () {
        const result: any = fileReader.result;
        const msg = result ? JSON.parse(result).msg : '';
        Message({
          message: msg || '导出文件失败',
          type: 'error'
        });
      };
      return;
    }
    const aLink = document.createElement('a');
    const blob = new Blob([res.data], { type: mimeMap[mimeType] });
    // //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
    // eslint-disable-next-line prefer-regex-literals
    const patt = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
    const contentDisposition = decodeURI(res.headers['content-disposition']);
    const result = patt.exec(contentDisposition);
    if (result == null) {
      Message({
        message: '导出材料为空',
        type: 'error'
      });
      return;
    }
    let fileName = result[1];
    // eslint-disable-next-line no-useless-escape
    fileName = fileName.replace(/\"/g, '');
    aLink.href = URL.createObjectURL(blob);
    aLink.setAttribute('download', fileName); // 设置下载文件名称
    document.body.appendChild(aLink);
    aLink.click();
    document.body.removeChild(aLink);
  } catch (error) {
    Message({
      message: '导出文件失败',
      type: 'error'
    });
  }
}

重点是这一段

  	// 对错误数据的处理
    if (res.data.type === 'application/json') {
      const fileReader = new FileReader();
      fileReader.readAsText(res.data, 'utf-8');
      fileReader.onload = function () {
        const result: any = fileReader.result;
        const msg = result ? JSON.parse(result).msg : '';
        Message({
          message: msg || '导出文件失败',
          type: 'error'
        });
      };
      return;
    }

参考文章:参考文章来源地址https://www.toymoban.com/news/detail-635596.html

到了这里,关于文件流下载之——axios请求responseType为blob时,错误数据处理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 接口设置了responseType:‘blob‘后,接收不到后端错误信息

    下载文件流,需要接口设置responseType:\\\'blob\\\',接口设置了responseType:\\\'blob\\\'后,拿不到后端接口的异常信息,我们只需要添加如下代码:

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

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

    2024年04月25日
    浏览(46)
  • 前端文件导出设置responseType为blob时遇到的问题

    一、当我们前端调用导出文件接口时,一般情况都会在请求里添加responseType为blob   前几天遇到一个问题,后端人员 的这个接口会分别出现两种情况:  这时我们打印一下接口返回的数据类型,发现接口会返回一个blob类型的数据,并且blob中属性type是application/vnd.ms-excel,这就

    2024年02月06日
    浏览(60)
  • vue 封装的axios接口,请求接口动态增加headers&responseType

    一、遇到一个需求,掉接口的时候,给headers中添加一个参数

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

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

    2024年02月07日
    浏览(61)
  • Axios post请求出现500错误

    笔者在编写前端form表单传后端数据的时候,出现了以下问题 当我用axios发送post请求的时候,出现了500错误 笔者找了很长时间错误,代码没问题,后端接口也没问题, 后来发现问题出在实体类上了 当前端post请求调后端接口时候,后端控制台打印如下错误 看到错误提示说无法

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

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

    2024年02月05日
    浏览(53)
  • 通过 Blob 对二进制流文件下载实现文件保存下载

    原理 : 前端将二进制文件做转换 实现下载:请求后端接口-接收后端返回的二进制流(通过二进制流( Blob )下载, 把后端返回的二进制文件放在 Blob 里面)-再通过 file-saver 插件保存 需求背景 业务:下载模板文件 页面上使用: 保存文件: 发起请求通用方法(更改 axios 的 re

    2024年02月09日
    浏览(71)
  • JS实现Blob文件流下载

    在 JavaScript 中,可以使用浏览器提供的 Blob 对象和 URL.createObjectURL() 方法来实现文件流下载。 下面是一个示例代码,可以帮助了解如何在 JavaScript 中实现文件流下载: 在这个示例中,我们定义了一个 downloadFile() 函数,这个函数接受三个参数: data 、 filename 和 type 。其中,

    2024年02月15日
    浏览(54)
  • 微信小程序:axios请求小程序登录返回错误码41002

    记一次开发中遇到的很愚蠢的错误,很久没有碰过小程序开发了,曾经用php写过小程序的后端,现在想用基于node的express框架做后端,开发一款自己专属的小程序,结果出师不利,使用axios请求小程序登录模块,返回41002错误代码,如下图所示: 这个就很难受了,然后尝试用微

    2024年02月12日
    浏览(44)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包