blob转换成string格式同步调用问题解决分析

 更新时间:2023年05月23日 09:11:12   作者:甜点cc  
这篇文章主要为大家介绍了blob转换成string格式同步调用问题解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

问题背景

通过接口下载文件的时候,后端设置的responseHeader

content-disposition: attachment;filename=文件名.xlsx
content-type: application/vnd.ms-excel;charset=utf-8

前端接口请求的时候,设置responseType: 'blob',后端接口直接返回的是文件流。

然后当下载文件异常的情况下,接口直接返回的“文件下载出错”的文字,这个时候业务组件内拿到的返回信息已经被转化成blob格式了,所有需要把blob转成 string,用来提示用户下载异常。

代码展示

请求响应拦截处理

获取文件流、文件名、文件后缀信息

// content-disposition: attachment;filename=文件名.xlsx
const contentDisposition = response.headers['content-disposition']
const _fileName = contentDisposition.split('=')[1]
const fileType = _fileName.substring(_fileName.lastIndexOf('.')); // .xlsx
const fileName = _fileName.substring(0, _fileName.lastIndexOf('.')); // 文件名
if (fileName && fileType) {
  return {
    data: response.data,
    fileName,
    fileType
  }
}

定义工具函数

因为把blob转成string需要用 FileReader去读取,FileReader 是异步的,所以这里需要用Promise返回,方便业务组件同步调用

export const downloadFile = (srcData, fileName='下载', fileType='.xls', target='_self') {
  var blob = new Blob([srcData])
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    // 兼容IE/Edge
    window.navigator.msSaveOrOpenBlob(blob, fileName + fileType)
  } else {
    var url = window.URL.createObjectURL(blob)
    var a = document.createElement('a')
    a.href = url
    a.target = target
    a.style.display = 'none'
    a.setAttribute('download', fileName + fileType)
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(url) // 释放资源
  }
}
export const blobToString = (blobData) => {
  return new Promise((resolve) => {
    if (blobData instanceof Blob) {
      const reader = new FileReader();
      reader.readAsText(blobData, 'utf-8')
      reader.onload = function () {
        resolve(reader.result || '')
      }
    } else {
      resolve('')
    }
  })
}

业务组件调用

// 省略部分代码
async down() {
  try {
    const res = await API();
    const { data, fileName, fileType, code} = res || {}
    if (code === -1) {
      const result = await blobToString(data)
      this.$message.error(result)
      return
    }
    downloadFile(data, fileName, fileType)
  } catch (err) {
    console.log(err)
  }
}

以上就是blob转string同步调用问题解决分析的详细内容,更多关于blob转string同步调用的资料请关注脚本之家其它相关文章!

相关文章

  • 一些常用的Javascript函数

    一些常用的Javascript函数

    一些常用的Javascript函数...
    2006-12-12
  • js对数字的格式化使用说明

    js对数字的格式化使用说明

    Javascript也提供了对数字进行格式化输出的支持,需要的朋友可以参考下。
    2011-01-01
  • JavaScript webpack模块打包器如何优化前端性能

    JavaScript webpack模块打包器如何优化前端性能

    本系列主要整理前端面试中需要掌握的知识点。本节介绍webpack如何优化前端性能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 微信小程序使用template标签实现五星评分功能

    微信小程序使用template标签实现五星评分功能

    这篇文章主要为大家详细介绍了微信小程序使用template标签实现五星评分功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JavaScript的懒加载处理的方式

    JavaScript的懒加载处理的方式

    懒加载是一种优化技术,它可以延迟加载某些资源,直到它们真正需要被使用的时候才进行加载,实现懒加载的方法一般分为两种:基于 Intersection Observer API 的懒加载和基于滚动事件的懒加载,本文给大家介绍JavaScript的懒加载处理方式,感兴趣的朋友一起看看吧
    2023-10-10
  • JS实现数组/对象数组删除其中某一项

    JS实现数组/对象数组删除其中某一项

    这篇文章主要介绍了JS实现数组/对象数组删除其中某一项,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • javascript下过滤数组重复值的代码

    javascript下过滤数组重复值的代码

    javascript下过滤数组重复值的代码...
    2007-09-09
  • 使用cypress编写第一个测试用例

    使用cypress编写第一个测试用例

    这篇文章主要为大家介绍了使用cypress编写第一个测试用例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • JS中去掉if...else的多种方法

    JS中去掉if...else的多种方法

    在JavaScript编程中,过多的if...elseif...else语句可能导致代码难以维护,可以通过switch语句、对象字面量、函数映射、数组或映射对象分发、提前返回以及使用数组的find方法来优化这种复杂的条件判断,提高代码的可读性和维护性,下面就来介绍一下
    2024-09-09
  • javascript实现下班倒计时效果的方法(可桌面通知)

    javascript实现下班倒计时效果的方法(可桌面通知)

    这篇文章主要介绍了javascript实现下班倒计时效果的方法,涉及javascript倒计时效果及桌面提示效果的实现技巧,具有一定参考借鉴价值
    2015-07-07

最新评论