解决vue element ui下载文件报错的问题

在使用Vue和Element UI开发时遇到了文件下载失败的三个问题:1) 需要设置responseType为blob;2) 遇到未捕获的Blob异常,需捕获并处理;3) request.js中响应异常处理,对于blob文件code可能为undefined,需设定默认值。通过代码示例展示了问题的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题背景

最近开发代码生成的时候,遇到生成的文件下载失败的问题,一共遇到三种情况,记录此文档,以备忘,也给大家一些参考。

问题一:Blob文件配置

需要在js文件配置responseType为blob,具体代码如下:

    url: '/mate-code/sys-code/generator-code',
    method: 'post',
    responseType: 'blob',

如果不配置,就按二进制在reponse里显示出内容,感觉出来像乱码。

问题二: Uncaught (in promise) Blob {size: 2515, type: “multipart/form-data”}

未捕获异常,这个是方法调用出来异常,需要捕获异常,样例代码如下:

            }).catch(function (error) {
              console.log("22222222222222222222222222")
            })

捕获异常发现error内容就是blob内容,仔细想想,有可能是axios判断的问题。

问题三:request.js 导致的响应异常的捕获

blob文件的模式,res.code,取值为undefined,需要增加一行代码,判断为未定义,赋予默认200,这样就可以正常处理业务。
代码如下:

const code = res.code || 200;

样例代码:

完整的前端代码,可以参见如下地址作为参考。

查看下载文件的完整代码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值