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.mzph.cn/diannao/61425.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

dpdk ppe模块细分

在基于 openEuler 系统运行 DPDK(Data Plane Development Kit) 时,涉及到的 PPE(Packet Processing Engine) 中的 SSU(Service Scheduling Unit)、PPP(Packet Processing Pipeline&a…

触发器清零引脚要上拉高电平

在使用触发器设计电路时,清零引脚该如何处理呢? 下图中NCLR是清零引脚,由于未使用就悬空了,没有任何电气连接,这样做是不对的。应该上拉至高电平。 加入电阻R3,上拉至3.3V,这样不使用清零功能的…

FPGA经验谈系列文章——9、块储存器的高效使用

前言 每个7系列的FPGA都包含多个36Kb容量的块存储器,俗称BlockRAM。一个BlockRAM是36Kb,它能够拆分成独立的两个18Kb,因此最小的使用单位就是18Kb。如果只想使用1Kb怎么办?不好意思,也得占用半个块存储资源18Kb。那如果使用了19Kb的话,那么就得使用一个完整的36Kb的Block…

SparkSQL 对 SQL 查询的优化静态优化和动态优化两大部分介绍

SparkSQL 对 SQL 查询的优化主要分为 静态优化 和 动态优化 两大部分,其中静态优化主要在查询编译时进行,而动态优化则是在查询执行过程中进行。SparkSQL 的优化包括了多种技术,例如 RBO(基于规则的优化)、CBO&#xf…

Vue_Router权限控制:不同角色显示不同路由

写在前面 在Vue中,Router是一个官方提供的用于处理应用程序路由的插件。它允许我们创建单页应用程序(SPA),其中不同的页面和组件可以通过URL进行导航和展示。使我们可以轻松地创SPA,并实现可复用和可组合的组件…

设计模式之 适配器模式

适配器模式(Adapter Pattern)是一种结构型设计模式,它允许将一个类的接口转换成客户端所期望的另一个接口。通过使用适配器模式,原本由于接口不兼容的类可以进行协作。简单来说,适配器模式就是将不兼容的接口连接起来&…

【LLM训练系列02】如何找到一个大模型Lora的target_modules

方法1:观察attention中的线性层 import numpy as np import pandas as pd from peft import PeftModel import torch import torch.nn.functional as F from torch import Tensor from transformers import AutoTokenizer, AutoModel, BitsAndBytesConfig from typ…

05_Spring JdbcTemplate

在继续了解Spring的核心知识前,我们先看看Spring的一个模板类JdbcTemplate,它是一个JDBC的模板类,用来简化JDBC的操作。 接下来以实际来进行说明 一、实例环境准备 数据库及表准备 我们在本地mysql中新增一个数据库test,并新增一张数据表:user create database if not…

萨瑞MCU R7FA8D1BH环境搭建教程

萨瑞MCU R7FA8D1BH环境搭建教程 如果你是大学生 遇到电子技术 学习 成长 入行难题 佳喔威信,给你提供一定资源和战略方法上的帮助 相信我的专业职业经历一定能帮到你 目录 概述 2. 开发板介绍3. 搭建rtthread环境4. 安装瑞萨的keil环境5. 搭建瑞萨的keil辅助环境…

鸿蒙实战:使用显式Want启动Ability

文章目录 1. 实战概述2. 实现步骤2.1 创建鸿蒙应用项目2.2 修改Index.ets代码2.3 创建SecondAbility2.4 创建Second.ets 3. 测试效果4. 实战总结5. 拓展练习 - 启动文件管理器5.1 创建鸿蒙应用项目5.2 修改Index.ets代码5.3 测试应用运行效果 1. 实战概述 本实战详细阐述了在 …

【Nginx】反向代理Https时相关参数:

在Nginx代理后台HTTPS服务时,有几个关键的参数需要配置,以确保代理服务器能够正确地与后端服务器进行通信。一些重要参数的介绍: proxy_ssl_server_name:这个参数用于指定是否在TLS握手时通过SNI(Server Name Indicati…

PH热榜 | 2024-11-19

DevNow 是一个精简的开源技术博客项目模版,支持 Vercel 一键部署,支持评论、搜索等功能,欢迎大家体验。 在线预览 1. Layer 标语:受大脑启发的规划器 介绍:体验一下这款新一代的任务和项目管理系统吧!它…

React Native 基础

React 的核心概念 定义函数式组件 import组件 要定义一个Cat组件,第一步要使用 import 语句来引入React以及React Native的 Text 组件: import React from react; import { Text } from react-native; 定义函数作为组件 const CatApp = () => {}; 渲染Text组件

一文详细了解websocket应用以及连接断开的解决方案

文章目录 websocketvite 热启动探索websocket -心跳websocket 事件监听应用过程中问题总结 websocket Websocket简介 定义和工作原理 Websocket是一种在单个TCP连接上进行全双工通信的协议。与传统的HTTP请求 - 响应模式不同,它允许服务器主动向客户端推送数据。例…

Vue 3与TypeScript集成指南:构建类型安全的前端应用

在Vue 3中使用TypeScript,可以让你的组件更加健壮和易于维护。以下是使用TypeScript与Vue 3结合的详细步骤和知识点: 1. 环境搭建 首先,确保你安装了Node.js(推荐使用最新的LTS版本)和npm或Yarn。然后,安…

React-useRef与DOM操作

#题引:我认为跟着官方文档学习不会走歪路 ref使用 组件重新渲染时,react组件函数里的代码会重新执行,返回新的JSX,当你希望组件“记住”某些信息,但又不想让这些信息触发新的渲染时,你可以使用ref&#x…

# Spring事务

Spring事务 什么是spring的事务? 在Spring框架中,事务管理是一种控制数据库操作执行边界的技术,确保一系列操作要么全部成功,要么全部失败,从而维护数据的一致性和完整性。Spring的事务管理主要关注以下几点&#xf…

Jenkins更换主题颜色+登录页面LOGO图片

默认主题和logo图片展示 默认主题黑色和白色。 默认LOGO图片 安装插件 Login ThemeMaterial Theme 系统管理–>插件管理–>Available plugins 搜不到Login Theme是因为我提前装好了 没有外网的可以参考这篇离线安装插件 验证插件并修改主题颜色 系统管理–>A…

LLM文档对话 —— pdf解析关键问题

一、为什么需要进行pdf解析? 最近在探索ChatPDF和ChatDoc等方案的思路,也就是用LLM实现文档助手。在此记录一些难题和解决方案,首先讲解主要思想,其次以问题回答的形式展开。 二、为什么需要对pdf进行解析? 当利用L…

【虚幻引擎】UE5数字人开发实战教程

本套课程将会交大家如何去开发属于自己的数字人,包含大模型接入,流式输出,语音识别,语音合成,口型驱动,动画蓝图,语音唤醒等功能。 课程介绍视频如下: 【虚幻引擎】UE5 历时一个多月…