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

问题背景

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

问题一: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;

样例代码:

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

查看下载文件的完整代码

你可能感兴趣的:(VUE,vue,axios,vue.js,node.js,webpack)