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

相关文章:

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

Vue项目开发中,遇到界面下载功能时,前端如何实现将后端返回二进制文件在浏览器自动下载? 一、关键代码: export function downloadFile(fileName) {axios({method: post,url: process.env.VUE_APP_BASE_API /cgi-bin/file,data:…...

Android解压zip文件到指定目录

很多时候需要把一个预制的zip文件解压到根目录,下面是一个实例代码: private static final int BUFFER_SIZE 4096;public static void unZip(String zipFilePath, String targetDir) throws IOException {File destDir new File(targetDir);if (!destD…...

主要用于图像的颜色提取、替换以及区域修改

这段代码涉及了以下几个关键步骤,主要用于图像的颜色提取、替换以及区域修改。下面是对代码的详细解析: 1. 导入库 import cv2 import matplotlib.pyplot as plt import numpy as npcv2: OpenCV库,用于图像处理。matplotlib.pyplot: 用于绘…...

gbase8c之运维操作

导出结构: gs_dump -U gbase8s -W Password123 -f /tmp/dump_only_structure.sql -p 15400 sids_station -n public -s -F p 导出数据: gs_dump -U gbase8s -W Password123 -f /tmp/dump_only_data.sql -p 15400 sids_station -n public -a -F p 导入…...

云原生学习

1、云原生学习 文章目录 1、云原生学习1. 介绍2. Docker容器化 1. 介绍 什么是云原生?原生指使用JAVA等语言编写的项目,云是指将项目部署到云服务器上云平台:公有云、私有云 本地平台是指直接部署在自己计算机,而开发的应用一定要…...

深入解析 Vue 3 中的 defineExpose

深入解析 Vue 3 中的 defineExpose 在 Vue 3 的组合式 API&#xff08;Composition API&#xff09;中&#xff0c;defineExpose 是一个重要的辅助函数&#xff0c;专门用于在 <script setup> 模式下暴露组件内部的属性和方法给父组件使用。本文将详细解析 defineExpose…...

Docker3:docker基础1

欢迎来到“雪碧聊技术”CSDN博客&#xff01; 在这里&#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者&#xff0c;还是具有一定经验的开发者&#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导&#xff0c;我将…...

【UGUI】背包的交互01(道具信息跟随鼠标+道具信息面板显示)

详细程序逻辑过程 初始化物品栏&#xff1a; 在 Awake 方法中&#xff0c;通过标签找到提示框和信息面板。 循环生成10个背包格子&#xff0c;并为每个格子设置图标和名称。 为每个格子添加 UInterMaager232 脚本&#xff0c;以便处理交互事件。 关闭提示框和信息面板&#…...

ubuntu20.04中编译安装gcc 9.2.0

ubuntu20.04中编译安装gcc 9.2.0,步骤如下&#xff1a; #install compile dependence libraries 1&#xff1a;$ sudo apt install libgmp-dev libisl-dev libmpc-dev libmpfr-dev # install gcc 9.2.0 # download source code 2&#xff1a;$ wget http://ftp.gnu.org/gn…...

ss 命令的基本用法

ss 命令的基本用法 ss [选项]-tanl 选项解释 -t&#xff1a;显示 TCP 连接。-a&#xff1a;显示所有连接&#xff08;包括监听端口&#xff09;。-n&#xff1a;显示数字形式的地址和端口号&#xff0c;而不是解析为主机名和服务名。-l&#xff1a;仅显示监听的端口。 使用示…...

Leetcode198. 打家劫舍(HOT100)

代码&#xff1a; class Solution { public:int rob(vector<int>& nums) {int n nums.size();vector<int> f(n 1), g(n 1);for (int i 1; i < n; i) {f[i] g[i - 1] nums[i - 1];g[i] max(f[i - 1], g[i - 1]);}return max(f[n], g[n]);} }; 这种求…...

kafka基础

文章目录 一、Kafka入门1.1、JMS1.2、生产者-消费者模式1.3、ZooKeeper 二、kafka基础架构2.1、producer2.2、kafka cluster2.2.1、broker2.2.2、Controller2.2.3、Topic2.2.4、Partition2.2.5、Replication2.2.6、Leader & Follower 2.3、consumer 一、Kafka入门 Kafka是一…...

STM32CUBEIDE FreeRTOS操作教程(九):eventgroup事件标志组

STM32CUBEIDE FreeRTOS操作教程&#xff08;九&#xff09;&#xff1a;eventgroup事件标志组 STM32CUBE开发环境集成了STM32 HAL库进行FreeRTOS配置和开发的组件&#xff0c;不需要用户自己进行FreeRTOS的移植。这里介绍最简化的用户操作类应用教程。以STM32F401RCT6开发板为…...

Python设计模式详解之2 —— 工厂模式

工厂模式&#xff08;Factory Pattern&#xff09;是一种创建型设计模式&#xff0c;旨在定义一个用于创建对象的接口&#xff0c;但由子类决定实例化哪个类。工厂模式可以帮助我们将对象的创建与其使用分离&#xff0c;增强代码的可扩展性和维护性。 工厂模式的分类 简单工厂…...

【Zookeeper】二、主从应用(master-worker架构)

以一张具有代表性的架构风格展开本篇论述 一般在这种架构中&#xff0c;主节点所负责的工作主要有 跟踪从节点状态分配任务到从节点&#xff0c;并跟踪任务的有效性&#xff08;任务是否正常执行完成&#xff09; 此时&#xff0c;我们需要关注三个问题 主节点崩溃 如果主节…...

Diffusion【2】:VAE

系列文章目录 文章目录 系列文章目录前言1. Abstract2. Introduction2.1. Motivation2.2. Contribution 3. Methods3.1. Problem Scenario3.2. The variational bound3.3. The SGVB estimator and AEVB algorithm3.3.1. Stochastic Gradient Variational Bayes Estimator3.3.2.…...

高级java每日一道面试题-2024年11月19日-基本篇-获取一个类Class对象的方式有哪些?

如果有遗漏,评论区告诉我进行补充 面试官: 获取一个类Class对象的方式有哪些? 我回答: 在 Java 中&#xff0c;获取一个类的 Class 对象有多种方式。这些方式各有优缺点&#xff0c;适用于不同的场景。以下是常见的几种方法及其详细解释&#xff1a; 1. 使用 new 关键字实…...

xilinx xapp1171学习笔记

在xapp1171示例中&#xff0c;假设Host PC将PCIE:BAR0赋值为&#xff1a;0x00000000_def00000 PCIEBAR2AXIBAR_00x81000000&#xff0c;即Host PC读写0x00000000_def00000就是在读写AXI地址0x81000000&#xff08;BRAM在AXI总线上的基地址&#xff09; 在AXI总线上&#xff0…...

一次需升级系统的wxpython安装(macOS M1)

WARNING: The scripts libdoc, rebot and robot are installed in /Users/用户名/Library/Python/3.8/bin which is not on PATH. 背景&#xff1a;想在macos安装Robot Framework &#xff0c;显示pip3不是最新&#xff0c;更新pip3后显示不在PATH上 参看博主文章末尾 MAC系统…...

el-table 数据去重后合并表尾合计行,金额千分位分割并保留两位小数,表尾合计行表格合并

问题背景 最近在做后台管理项目el-table 时候需要进行表尾合计&#xff0c;修改合计后文字的样式&#xff0c;合并单元格。 想实现的效果 合并表尾单元格前三列为1格&#xff1b;对某些指定的单元格进行表尾合计&#xff1b;合计后的文本样式加粗&#xff1b;涉及到金额需要千…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

tauri项目,如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值&#xff0c;可以通过标准的依赖&#xff1a; std::env::var(name).ok() 想在前端通过调用来获取&#xff0c;可以写一个command函数&#xff1a; #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...