Vue如何实现将后端返回二进制文件在浏览器自动下载

血色菠萝

一、关键代码

1. export function downloadFile(fileName) {
   
2.   axios({
   
3.     method: 'post',
   
4.     url: process.env.VUE_APP_BASE_API + '/cgi-bin/file',
   
5.     data: {
   
6.       'X-Token': getToken(),
   
7.       method: 'download',
   
8.       data: {
   
9.         filename: fileName
   
10.       }
    
11.     },
    
12.     responseType: 'blob'
    
13.   }).then((res) => {
    
14.     const blob = new Blob([res.data], { type: 'application/octet-stream;charset=utf-8' }); // 将二进制流转为blob
    
15.     const a = document.createElement('a');
    
16.     const url = window.URL.createObjectURL(blob); // 创建新的url并指向file对象或blob对象的地址
    
17.     a.href = url;
    
18.     a.download = fileName; // 设置下载文件名
    
19.     a.style.display = 'none'; //避免数据量过大,下载时间长，看到a标签
    
20.     document.body.appendChild(a);
    
21.     a.click();//关键；调用点击事件，(模拟a标签的点击下载效果)
    
22.     document.body.removeChild(a); // 下载完成移除元素
    
23.     window.URL.revokeObjectURL(url); // 释放内存
    
24.   });
    
25. }

复制代码

二、实现逻辑

首先，整个下载逻辑执行有以下几步：
1.前端发起请求拿到后端返回的二进制格式的数据；
2.将请求响应体中的二进制目标数据转行为blob类型的数据；
3.创建一个a标签，后续的自动下载的关键功能就是利用a.click()实现；
4.利用window.URL.createObjectURL(blob)方法，利用第二步转换的blob数据创建出一个url，并赋值给第三步创建的a标签的href属性；
5.利用document.body.appendChild(a)将a标签添加到body标签中，后执行a.click()实现文件下载；
6.下载完成后，要移除a标签，使用代码document.body.removeChild(a)实现；
7.释放第四步创建的url地址内存；
8.整个下载流程结束。

三、代码解读

如上图，封装了下载文件的函数，其中axios网络请求的编写根据你实际后端定的接口来写，主要目的就是拿到后端返回的二进制数据。其中fileName，是当前请求一个参数，同时也作为后续要用到的文件名。需要注意的是，请求的responseType:"blob"。
二进制格式数据转行blob数据类型的代码；

1. const blob = new Blob([res.data], { type: 'application/octet-stream;charset=utf-8' }); // 将二进制流转为blob

复制代码

创建a标签；创建url地址；给a标签href属性赋值url地址；执行点击操作；最后移除a标签 释放url内容。

1. const a = document.createElement('a');
   
2. const url = window.URL.createObjectURL(blob); // 创建新的url并指向file对象或blob对象的地址
   
3. a.href = url;
   
4. a.download = fileName; // 设置下载文件名
   
5. a.style.display = 'none'; //避免数据量过大,下载时间长，看到a标签
   
6. document.body.appendChild(a);
   
7. a.click(); //关键；调用点击事件，(模拟a标签的点击下载效果)
   
8. document.body.removeChild(a); // 下载完成移除元素
   
9. window.URL.revokeObjectURL(url); // 释放内存

复制代码

以上就是Vue如何实现将后端返回二进制文件在浏览器自动下载的详细内容，更多关于Vue浏览器自动下载的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/javascript/331214ouy.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！