axios 下载zip解压失败，但是postman解压成功解决方案

解决Vue项目中下载文件失败的问题

最新推荐文章于 2024-03-07 16:37:20 发布

原创最新推荐文章于 2024-03-07 16:37:20 发布 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#postman #vue.js #javascript

这篇博客主要讨论了在Vue项目中遇到的下载zip文件失败的问题，原因是axios的配置错误和版本过低。错误的前端代码尝试通过axios.post()下载文件，但未正确设置responseType和Content-Type。解决方案包括更新axios版本并调整axios请求方式，确保responseType为'arraybuffer'，从而成功下载并解压文件。

1.常规的是使用了"mock" ，但是本vue项目没有使用到"mock"

后端代码

 @RequestMapping("/code/generateDownLoad")
    public void generateDownLoad(@RequestBody ParamInfo paramInfo, HttpServletResponse response) throws Exception {
        ClassInfo classInfo = null;
        String dataType = MapUtil.getString(paramInfo.getOptions(),"dataType")
        paramInfo.getOptions().put("classInfo", classInfo);
        paramInfo.getOptions().put("tableName", classInfo == null ? System.currentTimeMillis() : classInfo.getTableName());
        byte[] data = generatorService.downLoad(paramInfo.getOptions());
　　　　　
        response.setHeader("Content-Disposition", "attachment; filename=\"renren.zip\"");
        response.addHeader("Content-Length", "" + data.length);
　　　　　// 这里要声明返回的是二进制
        response.setContentType("application/octet-stream; charset=UTF-8");
        ServletOutputStream outputStream = response.getOutputStream();
        try{
            outputStream.write(data);
        }finally {
            outputStream.close();
        }

    }

　　错误的前端代码　

    generateDownLoad : function(){
            vm.formData.tableSql=$.inputArea.getValue();
            let config = {
                headers: {
                    'Content-Type': 'application/json; application/octet-stream'
                }
            };
            axios({
                method: 'post',
                url: "code/generateDownLoad",
                data: vm.formData,
                responseType: 'arraybuffer',
                headers: {'Content-Type':'application/json; application/octet-stream'}
                }).then(function (data) {
                    debugger
                let blob = new Blob([data.data],{type:'application/zip'});
                const downloadUrl = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = downloadUrl;
                link.setAttribute('download', 'file.zip'); //any other extension
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); //下载完成移除元素
                window.URL.revokeObjectURL(downloadUrl); //释放blob对象

            })
                .catch(function (error) {
                    console.log(error);
                });

        },

　　下载下来的zip 包解压失败未预料的解压末端

　　几点原因

　　　　1.axios.post() 这种写法，是不支持写入responseType的，即使写了，底层也没调用

　　　　2.使用axios(method:'post',config) 这种依然不可以，报不支持 arraybuffer，是因为axios 的版本低。找一个最新的版本

　　　　3.responseType 未设置

　定位方式：debugger 可以看到响应里面的responsType="" 应该是responsType="arraybuffer"

最后升级axios的版本，并且修改axios post 的请求方式成功解决

解决后的前端代码

    generateDownLoad : function(){
            vm.formData.tableSql=$.inputArea.getValue();
　　　　　　// 注意这里的写法已经改变
            axios({
                method: 'post',
                url: "code/generateDownLoad",
                data: vm.formData,
                responseType: 'arraybuffer',
                headers: {'Content-Type':'application/json; application/octet-stream'}
                }).then(function (data) {
                    debugger
                let blob = new Blob([data.data],{type:'application/zip'});
                const downloadUrl = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = downloadUrl;
                link.setAttribute('download', 'file.zip'); //any other extension
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); //下载完成移除元素
                window.URL.revokeObjectURL(downloadUrl); //释放blob对象

            })
                .catch(function (error) {
                    console.log(error);
                });

        }