当前位置: 首页 > news >正文

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

在这里插入图片描述

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

一、关键代码:

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' }); // 将二进制流转为blobconst 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数据类型的代码;

 const blob = new Blob([res.data], { type: 'application/octet-stream;charset=utf-8' }); // 将二进制流转为blob
  1. 创建a标签;创建url地址;给a标签href属性赋值url地址;执行点击操作;最后移除a标签 释放url内容。
 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 后端返回二进制流文件,前端如何实现下载?

http://www.lryc.cn/news/489209.html

相关文章:

  • Android解压zip文件到指定目录
  • 主要用于图像的颜色提取、替换以及区域修改
  • gbase8c之运维操作
  • 云原生学习
  • 深入解析 Vue 3 中的 defineExpose
  • Docker3:docker基础1
  • 【UGUI】背包的交互01(道具信息跟随鼠标+道具信息面板显示)
  • ubuntu20.04中编译安装gcc 9.2.0
  • ss 命令的基本用法
  • Leetcode198. 打家劫舍(HOT100)
  • kafka基础
  • STM32CUBEIDE FreeRTOS操作教程(九):eventgroup事件标志组
  • Python设计模式详解之2 —— 工厂模式
  • 【Zookeeper】二、主从应用(master-worker架构)
  • Diffusion【2】:VAE
  • 高级java每日一道面试题-2024年11月19日-基本篇-获取一个类Class对象的方式有哪些?
  • xilinx xapp1171学习笔记
  • 一次需升级系统的wxpython安装(macOS M1)
  • el-table 数据去重后合并表尾合计行,金额千分位分割并保留两位小数,表尾合计行表格合并
  • Springboot整合mybatis-plus使用pageHelper进行分页
  • 【Xbim+C#】创建拉伸的墙
  • 【阅读记录-章节3】Build a Large Language Model (From Scratch)
  • three.js 对 模型使用 视频进行贴图修改材质
  • MySQL - 数据库基础 | 数据库操作 | 表操作
  • maven父子项目
  • NLP论文速读(多伦多大学)|利用人类偏好校准来调整机器翻译的元指标
  • MyBatis——#{} 和 ${} 的区别和动态 SQL
  • 解决sql字符串
  • 深度解析:Android APP集成与拉起微信小程序开发全攻略
  • Leetcode 被围绕的区域