Vue POST请求导出文件及破损文件处理方式

原创于 2020-04-22 18:48:44 发布 · 置顶 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

前端同时被 3 个专栏收录

15 篇文章

订阅专栏

VUE

9 篇文章

订阅专栏

导出文件

1 篇文章

订阅专栏

本文介绍了一种使用Axios库进行POST请求并导出文件的方法，特别关注于避免文件导出时出现破损或乱码的问题。通过设置responseType为'blob'，确保了文件的完整性和正确显示。

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

简单点，说话的方式简单点：直接上代码~~

axios({            // 用axios发送post请求       
     method: 'post',            
     withCredentials: true,            
     url:url, // 请求地址            
     data: param,            
     responseType: 'blob',//防止导出文件破损或乱码            
     headers: {   'Content-Type': 'application/json'  }
       }).then(res => {            
       try {              
           var blob = new Blob([res.data]); 
           var filename = fileName;               
           var a = document.createElement('a');               
           var url =window.URL.createObjectURL(blob);               
           a.href = url;                
           a.download = filename;                
           var body = document.getElementsByTagName('body')[0];               
           body.appendChild(a);               
           a.click();                
           body.removeChild(a);                
           window.URL.revokeObjectURL(url);            
            } catch (e) {              
           
             }      
         })

我是按这块代码来处理的，如果你遇到导出文件破损或者乱码的情况
一定要检查一下你是否添加
responseType: ‘blob’！！！！！