Vue:后端返回二进制文件,前端如何实现浏览器自动下载?

Vue项目开发中,遇到界面下载功能时,前端如何实现将后端返回二进制文件在浏览器自动下载

一、关键代码:

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

二、实现逻辑:

首先,整个下载逻辑执行有以下几步:

  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. 整个下载流程结束。

三、代码解读:

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

  2. 二进制格式数据转行blob数据类型的代码;

javascript 复制代码
 const blob = new Blob([res.data], { type: 'application/octet-stream;charset=utf-8' }); // 将二进制流转为blob
  1. 创建a标签;创建url地址;给a标签href属性赋值url地址;执行点击操作;最后移除a标签 释放url内容。
javascript 复制代码
 const a = document.createElement('a');
 const url = window.URL.createObjectURL(blob); // 创建新的url并指向file对象或blob对象的地址
 a.href = url;
 a.download = fileName; // 设置下载文件名
 a.style.display = 'none'; //避免数据量过大,下载时间长,看到a标签
 document.body.appendChild(a);
 a.click(); //关键;调用点击事件,(模拟a标签的点击下载效果)
 document.body.removeChild(a); // 下载完成移除元素
 window.URL.revokeObjectURL(url); // 释放内存

四、相关文章:

1.下载后端返回的二进制文件

2.前端实现调用后台接口下载,arraybuffer和blob

3.前端通过axios请求下载excel文件

4.后端返回二进制文件流,前端处理下载

5.vue 后端返回二进制流文件,前端如何实现下载?

相关推荐
dualven_in_csdn2 小时前
搞了两天的win7批处理脚本问题
java·linux·前端
你的人类朋友2 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程3 小时前
纯前端做图片压缩
开发语言·前端·javascript
银色的白3 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
应巅3 小时前
echarts 数据大屏(无UI设计 极简洁版)
前端·ui·echarts
萌萌哒草头将军4 小时前
🚀🚀🚀什么?浏览器也能修改项目源文件了?Chrome 团队开源的超强 Vite 插件!🚀🚀🚀
vue.js·react.js·vite
Jimmy4 小时前
CSS 实现描边文字效果
前端·css·html
islandzzzz4 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
Senar4 小时前
网页中如何判断用户是否处于闲置状态
前端·javascript
很甜的西瓜4 小时前
typescript软渲染实现类似canvas的2d矢量图形引擎
前端·javascript·typescript·图形渲染·canvas