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 后端返回二进制流文件,前端如何实现下载?

相关推荐
像风一样自由202013 分钟前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem1 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊1 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术1 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理1 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing1 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止2 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall2 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴2 小时前
简单入门Python装饰器
前端·python
袁煦丞2 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作