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

最新推荐文章于 2025-06-03 00:09:15 发布

原创最新推荐文章于 2025-06-03 00:09:15 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #axios #vue.js #node.js #webpack

VUE 专栏收录该内容

10 篇文章

订阅专栏

在使用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;

样例代码：

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

查看下载文件的完整代码