问题背景

通过接口下载文件的时候,后端设置的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)
}
}

我是 甜点cc

公众号:【看见另一种可能】

blob转string,同步调用的更多相关文章

  1. Winform同步调用异步函数死锁原因分析、为什么要用异步

    1.前言 几年前,一个开发同学遇到同步调用异步函数出现死锁问题,导致UI界面假死.我解释了一堆,关于状态机.线程池.WindowsFormsSynchronizationContext.Post.co ...

  2. 如何实现 javascript “同步”调用 app 代码

    在 App 混合开发中,app 层向 js 层提供接口有两种方式,一种是同步接口,一种一异步接口(不清楚什么是同步的请看这里的讨论).为了保证 web 流畅,大部分时候,我们应该使用异步接口,但是某些 ...

  3. 尝试解决在构造函数中同步调用Dns.GetHostAddressesAsync()引起的线程死锁

    (最终采用的是方法4) 问题详情见:.NET Core中遇到奇怪的线程死锁问题:内存与线程数不停地增长 看看在 Linux 与 Windows 上发生线程死锁的后果. Linux: Microsoft ...

  4. 循序渐进做项目系列(2):最简单的C/S程序——消息异步调用与消息同步调用

    上篇博客 循序渐进做项目系列(1):最简单的C/S程序——让服务器来做加法 实现了一个最简单的C/S程序,即让服务器来做加法.当时为了通俗易懂采用了消息异步调用的方式.今天我们要采用消息同步调用的方式 ...

  5. 整理 C#(同步调用、异步调用、异步回调)

    //闲来无事,巩固同步异步方面的知识,以备后用,特整理如下: class Program { static void Main(string[] args) { //同步调用 会阻塞当前线程,一步一步 ...

  6. HttpClient中异步方法的同步调用

    在System.Net.Http中,提供了使用Http与远程服务器通讯的httpClient,但是里面都是异步方法,有时候我们并不需要使用异步操作.这个时候可以使用如下的方式来进行同步调用. clas ...

  7. 消息同步调用-- ESFramework 4.0 进阶(07)

    分布式系统的构建一般有两种模式,一是基于消息(如Tcp,http等),一是基于方法调用(如RPC.WebService.Remoting).深入想一想,它们其实是一回事.如果你了解过.NET的Prox ...

  8. 似是而非的JS - 异步调用可以转化为同步调用吗?

    源起 小飞是一名刚入行前端不久的新人,因为进到了某个大公司,俨然成为了学弟学妹眼中'大神',大家遇到js问题都喜欢问他,这不,此时他的qq弹出了这样一条消息 "hi,大神在吗?我有个问题想问 ...

  9. Storm同步调用之DRPC模型探讨

    摘要:Storm的编程模型是一个有向无环图,决定了storm的spout接收到外部系统的请求后,spout并不能得到bolt的处理结果并将结果返回给外部请求.所以也就决定了storm无法提供对外部系统 ...

  10. dubbo_远程同步调用原理

    Dubbo缺省协议采用单一长连接和NIO异步通讯,适合于小数据量大并发的服务调用,以及服务消费者机器数远大于服务提供者机器数的情况. Dubbo缺省协议,使用基于mina1.1.7+hessian3. ...

随机推荐

  1. (Linux)不挂断启动进程

    环境:腾讯云Ubuntu x86_64 问题:在配置应用时,需要让他后台启动,关闭ssh连接也要可以保持后台运行 解决办法: 1.使用nohup 参考链接:https://zhuanlan.zhihu ...

  2. LVS负载均衡 2022年4月

    1. 负载均衡技术简介 2 1.1 负载均衡类型3 1.2 LVS简介4 1.3 Keepalived简介5 2. 负载均衡搭建主要步骤 6 2.1 LVS+Keepalived的负载均衡系统搭建6 ...

  3. vs调试导入功能时莫名自动结束调试

    新装了vs2022,默认下图所示的地方打勾,导致调试文件导入功能时触发了自动结束调试,真是坑爹~~

  4. ChatGPT的那些事 -1- 背景资料

    ChatGPT的那些事 -1- 背景资料 多处搬运,学无止境 目     录 1  关键词 1 1.1.  AIGC(百度百科) 1 1.2.  AlphaGo(百度百科) 1 1.3.  ChatG ...

  5. python中的反射机制

    转自https://www.cnblogs.com/renjie1105/p/15909285.html python反射简介 在做程序开发中,我们常常会遇到这样的需求:需要执行对象里的某个方法,或需 ...

  6. mysql 以自增id等于某个random()函数算出的值为条件查出两条数据

    SELECT id FROM users WHERE id = FLOOR( rand() * ( (SELECT max(id) FROM users) - (SELECT min(id) FROM ...

  7. 使用VSCode调试C#时,Console.ReadLine()弹出命令框调试

    原文链接:https://blog.csdn.net/qq_29503199/article/details/88351498   要在调试时读取输入,可以在 launch.json 中使用配置中的 ...

  8. Zip Slip漏洞审计实战

    前言 最近看到许少的推有说到Zip Slip这个漏洞导致的RCE,其实我在代码审计的时候确实发现有不少功能模块都是使用ZIP来解压,其实还是在真实系统中经常见到的. 于是想着好久没有写过博客了,想借着 ...

  9. VsCode新建Java、SpringBoot、Python、JavaWeb项目的基本步骤

    新建Java项目 选中正上方的搜索框,按下F1快捷键,输入create Java,即可出现这样的一个命令: 选中这个: 然后为新创建的项目选择一个合适的位置就好啦! 新建SpringBoot项目 选中 ...

  10. 关于Android开发工具的下载之SDK篇

    SDK的下载 需要注意的是,如果我们使用的是Eciplise工具的话,那我们需要下载版本较低的android SDK tools, 在这里把下载链接放在这里啦:https://link.csdn.ne ...