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

前端通过new Blob下载文档流（下载zip或excel）

news 来源：原创 2025/6/2 13:10:18

当后端返回这样的预览：

前端该如何下载呢？首先在axios请求里，加入第三个参数{ responseType: ‘blob’ }。

proxy.$post(url, params, { responseType: 'blob' }).then((res)=>{downloadFormat(res)
});

然后在一个函数里处理返回，创建a标签来下载

// 这里是下载zip文件的处理const downloadFormat = (res) => {if (!res.data) {return;}let stringName = res.headers['content-disposition'].split(';')[1];// 一般来说，文件名字后端都在返回头里，前后端可以约定文件名前用 @ 符号分隔，便于取值，用其他符号也可以。let fileName = stringName.split('=')[1];// 获取到了后缀名const blob = new Blob([res.data], { type: 'application/zip' }); // application/zip就是设置下载类型，需要设置什么类型可在标题二处查看，const url = window.URL.createObjectURL(blob); // 设置路径const link = window.document.createElement('a'); // 创建a标签link.href = url;link.setAttribute('download', fileName); // 给下载后的文件命名link.style.display = 'none';link.click();URL.revokeObjectURL(url); // 释放内存
}// 这里是下载excel的处理, 可根据需要传文件名和文件类型const downloadFormat = (res, fileName, fileType) => {let stringName = res.headers['content-disposition'].split(';')[1];let fileName = stringName.split('=')[1];const blob = new Blob([res.data], { type: fileType ?? 'application/vnd.ms-excel' });// application/vnd.ms-excel 表示.xls文件// application/vnd.openxmlformats-officedocument.spreadsheetml.sheet 表示.xlsx文件// 也可以不写type，反正是下载，又不是上传。if (!blob) {return;}const url = window.URL.createObjectURL(blob);const link = document.createElement('a');link.style.display = 'none';link.href = url;link.setAttribute('download', fileName);document.body.appendChild(link);link.click();window.URL.revokeObjectURL(url); // 为了性能和内存使用状况，应该在适当的时候释放url
}

还有一种get方式通过window.location.href来下载文件，在浏览器F12网络里预览和响应没有返回值，写法如下

window.location.href = '/api/exportData?ids=' + 拼接的参数其中/api被代理转发了，在vite.config.js文件里config.server.proxy对象配置如下："/api": {target: "https://test.XXX.net",secure: false,changeOrigin: true,
}// 真实请求地址含api，并未被reWrite为空

前端通过new Blob下载文档流（下载zip或excel）

当后端返回这样的预览： 前端该如何下载呢？首先在axios请求里，加入第三个参数{ responseType: ‘blob’ }。 proxy.$post(url, params, { responseType: blob }).then((res)>{downloadFormat(res) });然后在一个函数里处理返回&#xff0c…...

编程日记 2025/6/2 13:10:18

R 常用的内置软件包及功能介绍

R 中有许多内置包，提供了丰富的功能来帮助用户进行数据分析、统计建模、图形可视化等任务。以下是一些常用的内置包及其功能简介： 1. stats 包 stats 是 R 的一个核心包，几乎每个 R 用户都会使用它。它包含了许多统计分析的函数&#xff0c…...

编程日记 2025/5/29 14:29:02

基于 HC_SR04的超声波测距数码管显示（智能小车超声波避障部分）

超声波测距模块HC-SR04 1、产品特色 ①典型工作用电压：5V ②超小静态工作电流：小于 5mA ③感应角度(R3 电阻越大,增益越高,探测角度越大)： R3 电阻为 392,不大于 15 度 R3 电阻为 472, 不大于 30 度 ④探测距离(R3 电阻可调节增益,即调节探测…...

编程日记 2025/5/26 19:30:09

12月第十九讲:Redis应用Redis相关解决方案

1.数据库与缓存一致性方案 2.热key探测系统处理热key问题 3.缓存大value监控和切分处理方案 4.Redis内存不足强制回收监控告警方案 5.Redis集群缓存雪崩自动探测限流降级方案 6.缓存击穿的解决方法线上Redis比较严重的问题排序是：数据库和缓存一致性、热key…...

编程日记 2025/6/1 20:58:44

solon 集成 activemq-client (sdk)

原始状态的 activemq-client sdk 集成非常方便，也更适合定制。就是有些同学，可能对原始接口会比较陌生，会希望有个具体的示例。 <dependency><groupId>org.apache.activemq</groupId><artifactId>activemq-client&l…...

编程日记 2025/5/30 22:17:27

STM32-笔记7-继电器定时开闭

1、复制02项目，重命名08-继电器定时开闭打开项目工程在\Drivers\BSP\该路径下，新建alarm文件夹，该文件夹下里面包含alarm.c和alarm.h文件加载进该项目中为什么这里使用的是这个单词，而不是继电器（relay&#…...

编程日记 2025/6/1 8:41:35

B4X编程语言：B4X的映射(数据地图Map)详解

B4X的映射(Map)是由多个键值对组成的数据集合，也称为数据地图。它和列表一样也是一个非可视化的数据容器，在B4X中作为变量使用，用于在单个变量下存储多个键值对。映射中的键是唯一的。这意味着，如果您添加了一个键/值对…...

编程日记 2025/5/31 21:21:35

windows C++ 判断文件大小，清空文件，写日志

windows C 判断文件大小，清空文件，写日志等几个常见的接口，记录一下备忘 #include <iostream> #include <vector> #include<Windows.h> #include<string> #include <iostream> #include <sys/types.h> …...

编程日记 2025/5/27 20:23:33

用Python设置Excel工作表的页眉和页脚

在处理和分析数据时，Excel作为一款功能强大的工具，被广泛应用于各个领域。当涉及到打印或分享工作表时，为文档添加专业的页眉和页脚不仅能提升文件的视觉效果，还能提供必要的信息，例如公司标识、日期、文件名或是页码等…...

编程日记 2025/5/30 10:22:14

electron-vite【实战】自定义标题栏【组件封装】（含异形标题栏，指定区域拖拽，窗口置顶，窗口最小化，窗口最大化，取消最大化，隐藏窗口到托盘等）

效果预览技术要点透明背景 src/main/index.ts 的 new BrowserWindow 中添加 transparent: true, // 设置窗口背景透明frame: false, // 隐藏窗口边框仅图标和标题部分可拖拽仅图标和标题部分添加样式 drag .drag {-webkit-app-region: drag; }图标与标题栏的融合标题栏的…...

编程日记 2025/6/1 19:07:07

MySQL复制问题和解决

目录环境介绍一，主库执行delete，从库没有该数据模拟故障修复故障二，主库执行insert，从库已存在该数据模拟故障故障恢复三，主库执行update，从库没有该数据模拟故障故障恢复四&#xf…...

编程日记 2025/5/31 8:05:24

Spark和Hive的区别

1 、 Hive Hive 是基于 Hadoop 的数据仓库工具，同时又是查询引擎， Spark SQL 只是取代的 Hive 的查询引擎这一部分，企业可以使用HiveSpark SQL 进行开发。 Hive 的主要工作如下： 把HQL 翻译长 map-reduce 的代码，并…...

编程日记 2025/5/31 6:32:26

Type-C 接口电热毯：开启温暖智能新时代

在当今科技迅猛发展的时代，智能家居产品如同璀璨繁星般点缀着我们的生活，从智能灯光的温馨到温控系统的精准，处处都彰显着科技赋予生活的便捷与舒适。而在这股追求高效与智能化的洪流之中，一款极具创新的电热毯——Type-C 接口电热…...

编程日记 2025/6/1 21:22:57

React 19新特性探索：提升性能与开发者体验

React作为最受欢迎的JavaScript库之一，不断推出新版本以应对日益复杂的应用需求。React 19作为最新的版本，引入了一系列令人兴奋的新特性和改进，旨在进一步提升应用的性能、开发效率和用户体验。本文将深入探讨React 19的新特性，…...

编程日记 2025/5/31 6:16:41

【数据库】SQL语句基础

【数据库】SQL语句基础文章目录【数据库】SQL语句基础一、SQL与数据库二、 SQL语句类型2.1 数据定义语言（DDL）1. 创建数据库：CREATE DATABASE2. 创建表：CREATE TABLE3. 删除表：DROP TABLE4. 修改表结构：A…...

编程日记 2025/6/1 23:23:35

性能】JDK和Jmeter的安装与配置

一、JDK环境配置 1. 下载JDK 官网下载地址：http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downloads-javase7-521261.html 选择对应系统的安装包，下载后安装，安装中记录JDK安装的地址，之后一直点击下一…...

编程日记 2025/5/26 19:30:24

Hadoop、Hbase使用Snappy压缩

1. 前期准备系统环境：centos7.9 配置信息：8C8G100G hadoop和hbase为单节点部署模式 jdk版本jdk1.8.0_361 1.1. 修改系统时间 timedatectl set-timezone <TimeZone> 1.2. 修改主机名以及主机名和IP的映射 vim /etc/hosts #将自己的主机名以及…...

编程日记 2025/6/2 10:01:44

初试Docker

1. 查看版本 docker --version2. 拉取镜像并查看当前存在的镜像 docker pull hello-world查看是否成功拉取到docker docker images在Docker Desktop 可视化查看 3. 删除镜像 docker rmi xxx4. 启动容器以下命令使用 mysql镜像启动一个容器，参数为以命令行模…...

编程日记 2025/5/27 0:59:32

【Rust自学】4.5. 切片（Slice）

4.5.0. 写在正文之前这是第四章的最后一篇文章了，在这里也顺便对这章做一个总结： 所有权、借用和切片的概念确保 Rust 程序在编译时的内存安全。 Rust语言让程序员能够以与其他系统编程语言相同的方式控制内存使用情况，但是当数据所有者超…...

编程日记 2025/5/30 5:02:03

What Is SQLite? SQLite is a C-language library that implements a small, fast, self-contained, high-reliability, full-featured, SQL database engine. SQLite is the most used database engine in the world ps:SQLite Home Page sqlite3 的安装： user…...

编程日记 2025/5/31 10:31:30

全脐点曲面当且仅当平面或者球面的一部分

S 是全脐点曲面当且仅当 S 是平面或者球面的一部分。 S_\text{ 是全脐点曲面当且仅当 }{S_\text{ 是平面或者球面的一部分。}} S 是全脐点曲面当且仅当 S 是平面或者球面的一部分。证： 充分性显然，下证必要性。若 r ( u , v ) r(u,v) r(u,v)是…...

编程日记 2025/5/28 22:42:42

Vue之版本演进

一、引言 Vue.js，发音为 /vjuː/，是一款轻量级的用于构建用户界面的渐进式JavaScript框架。自2014年由前Google工程师尤雨溪（Evan You）发布以来，Vue.js凭借其简洁的API、灵活的组件系统以及高效的性能，迅速…...

编程日记 2025/5/31 6:17:22

四川托普信息技术职业学院教案1

四川托普信息技术职业学院教案【计科系】周次第 1周，第1次课备注章节名称第1章 XML语言简介引言 1.1 HTML与标记语言 1.2 XML的来源 1.3 XML的制定目标 1.4 XML概述 1.5 有了HTML了，为什么还要发展XML 1.5.1 HTML的缺点 1.5.2　XML的特点 1.6 X…...

编程日记 2025/5/28 17:49:34

《Java核心技术I》Swing中的边框

边框 BorderFactory静态方法创建边框，凹斜面，凸斜面，蚀刻，直线，蒙版，空白。边框添加标题，BorderFactory.createTitledBorder 组合边框，BorderFactory.createCompoundBorder JCo…...

编程日记 2025/6/1 11:07:32

xlua中自定义lua文件加载的一种方式

此种方法来自LoxodonFramework，这里只做记录定义一个LoaderBase类，做一个到CustomLoader的隐式类型转换 public abstract class LoaderBase {protected abstract byte[] Load(ref string fileName);/// <summary>/// 隐式类型转换，将…...

编程日记 2025/5/31 6:49:48

Suno Api V4模型无水印开发「高清音频WAV下载」 —— 「Suno Api系列」第6篇

历史文章 Suno AI API接入 - 将AI音乐接入到自己的产品中，支持120并发任务 Suno Api V4模型无水印开发「灵感模式」 —— 「Suno Api系列」第1篇 Suno Api V4模型无水印开发「自定义模式」 —— 「Suno Api系列」第2篇 Suno Api V4模型无水印开发「AI生成歌词」…...

编程日记 2025/5/28 8:35:41

EE308FZ_Sixth Assignment_Beta Sprint_Sprint Essay1

AssignmentBeta SprintCourseEE308FZ[A] — Software EngineeringClass Link2401_MU_SE_FZURequirementsSixth Assignment——Beta SprintTeam NameFZUGOObjectiveSprint Essay 1_Day1-Day2 (12.11-12.12)Other Reference1. WeChat Mini Program Design Guide 2. Javascript St…...

编程日记 2025/6/2 3:57:11

github如何给本机绑定 ssh密钥（MACOS）

生成 SSH 密钥如果没有现成的密钥，执行以下命令来生成一个新的 SSH 密钥： ssh-keygen -t rsa -b 4096 -C "替换为你的邮箱" 添加 SSH 密钥到 SSH 代理在终端中运行以下命令，启动 SSH 代理： eval "$(ssh-agen…...

编程日记 2025/5/28 3:43:25

使用Python实现基于AR的教育应用：打破课堂的墙壁

友友们好！我的新专栏《Python进阶》正式启动啦！这是一个专为那些渴望提升Python技能的朋友们量身打造的专栏，无论你是已经有一定基础的开发者，还是希望深入挖掘Python潜力的爱好者，这里都将是你不可错过的宝藏。在这个专栏中，你将会找到： ● 深入解析：每一篇文章都将…...

编程日记 2025/5/27 6:36:59

【数据分析】层次贝叶斯

文章目录一、贝叶斯推理二、层次贝叶斯模型三、层次贝叶斯的特点四、数学表述五、推断方法六、应用领域层次贝叶斯（Hierarchical Bayesian）方法是一种基于贝叶斯推理的统计模型，用于处理具有多个层次结构的数据模型。它允许我们在同一…...

编程日记 2025/5/30 1:27:52

linux top命令刷新速度的原理

top命令刷新速度的原理 top命令默认会按照一定的时间间隔（通常是3秒）更新系统资源使用情况的显示内容。它通过读取系统的/proc文件系统中的相关文件（如/proc/stat用于CPU信息、/proc/meminfo用于内存信息等）来获取最新的进程和资源…...

编程日记 2025/6/1 6:24:56

bestphp‘s revenge

bestphp’s revenge 知识点 php session反序列化解题 <?php highlight_file(__FILE__); $b implode; call_user_func($_GET[f], $_POST); //参数二的位置固定为 $_POST 数组，我们很容易便想到利用 extract 函数进行变量覆盖，以便配合后续利用…...

编程日记 2025/5/27 21:37:53

中化信息与枫清科技深化合作：共探“AI+”产业新生态

随着数字化转型的浪潮席卷全球，数据已成为推动创新和经济增长的关键力量。为持续深化数据要素价值挖掘与应用实践，推动打造行业交流平台，驱动产业创新共荣，2024 年 12 月 18 日 -19 日，由中国通信标准化协会主办的“20…...

编程日记 2025/5/29 21:58:52

Java性能测试Benchmark使用总结

如何测量Java代码的性能在 Java 中，可以使用多种方法来测量一段代码的执行性能。使用 System.currentTimeMillis()是最常见的方法 long startTime System.currentTimeMillis();// 需要测量的代码块 for (int i 0; i < 1000000; i) {// 示例代码 }long endTi…...

编程日记 2025/6/1 2:50:35

完整微服务设计功能实现

我们将以一个简单的电商系统为例，实现微服务架构，逐步用Java代码详细实现每个模块，并配合注释帮助小白理解。在这个实现中，我们使用以下工具和框架： Spring Boot：用于构建微服务。Spring Cloud&#xff1a…...

编程日记 2025/5/29 4:05:57

【Java基础面试题025】什么是Java的Integer缓存池？

回答重点 Java的Integer缓存池（Integer Cache）是为了提升性能和节省内存。根据实践发现大部分的数据操作都集中在值比较小的范围，因此缓存这些对象可以减少内存分配和垃圾回收的负担，提升性能在 -128到127范围内的Integer对象会…...

编程日记 2025/6/1 10:05:46

道可云人工智能元宇宙每日资讯｜浙江工商大学发布“人工智能时代创新型人才培养行动计划”

道可云元宇宙每日简报（2024年12月20日）讯，今日元宇宙新鲜事有： 浙江工商大学发布“人工智能时代创新型人才培养行动计划” 12月18日，浙江工商大学发布了《人工智能时代创新型人才培养行动计划》，提出人工…...

编程日记 2025/5/28 7:06:43

树莓派4B 搭建openwrt内置超多插件docker,nas等等使用教程

刷入固件 (想要固件的加我vx wyy7293) bleachwrt-plus-20241112-bcm27xx-bcm2711-rpi-4-squashfs-factory.img上电,并且把网线两头分别插在pi网口上和电脑的网口上(电脑必须断网) 等待网口灯亮,进入192.168.1.1 默认账密 root password 进入系统后更改openwrt的网关地址相关…...

编程日记 2025/5/29 3:16:20

excel 列名是数据表的字段名，单元格的值是数据表对应字段的值，生成sql插入语句

在 Excel 中，按 Alt F11 打开 VBA 编辑器。在菜单栏选择插入 -> 模块，在新模块中粘贴以下代码。 VBA 代码 Sub GenerateSQLInsertStatementsToFile()Dim ws As WorksheetDim lastRow As Long, lastCol As Long, i As Long, j As LongDim sql As S…...

编程日记 2025/5/29 1:37:44

【Rust自学】4.3. 所有权与函数

4.3.0 写在正文之前在学习了Rust的通用编程概念后，就来到了整个Rust的重中之重——所有权，它跟其他语言都不太一样，很多初学者觉得学起来很难。这个章节就旨在让初学者能够完全掌握这个特性。本章有三小节： 所有权&#xff1…...

编程日记 2025/5/29 7:53:54

OpenShift 4 - 多云管理(2) - 配置多集群观察功能

《OpenShift / RHEL / DevSecOps 汇总目录》本文在 OpenShift 4.17 RHACM 2.12 环境中进行验证。文章目录多集群观察技术架构安装多集群观察功能监控多集群的运行状态监控多集群的应用运行在被管集群监控应用运行在管理集群监控被管集群的应用运行参考多集群观察技术架构…...

编程日记 2025/5/30 10:16:53

【机器学习】机器学习的基本分类-强化学习（Reinforcement Learning, RL）

强化学习（Reinforcement Learning, RL）是一种基于试错的方法，旨在通过智能体与环境的交互，学习能够最大化累积奖励的策略。以下是强化学习的详细介绍。强化学习的核心概念智能体（Agent） 执行动作并与环境…...

编程日记 2025/5/28 10:49:53

Docker 设置代理的三种方法（2024年12月19日亲自测试）

Docker 设置代理的三种方法在 Docker 中设置代理是非常常见的需求，尤其是在某些需要通过代理访问外部资源的网络环境下。本文将介绍三种配置 Docker 使用代理的常见方法：通过 daemon.json 配置镜像加速器、通过 daemon.json 配置 HTTP/HTTPS 代理、以及…...

编程日记 2025/5/28 3:12:08

Pycharm配置Python开发环境

Pycharm配置Python开发环境在之前的文章中，安装好了Pyhton和Pycharm。打开Pycharm，如下图配置完成之后，如下图所示：...

编程日记 2025/5/24 6:41:29

【信息系统项目管理师】高分论文：论信息系统项目的进度管理（一体化智能公共数据平台）

更多内容请见：备考信息系统项目管理师-专栏介绍和目录文章目录论文1、规划进度管理2、定义活动3、排列活动顺序5、制定进度计划6、控制进度论文 2022年9月，我作为项目经理参加了XX市的一体化智能公共数据平台项目的建设工作，2022年是XX市政府数字化改革的元年，全市上下…...

编程日记 2025/5/28 10:17:42

Chromium CDP 开发（十）：Chromium 中增加自己的Domain

1. 引言在深入了解了 Chromium CDP（Chrome DevTools Protocol）的开发过程之后，接下来我们将探讨如何创建一个自定义的 CDP Domain。通过为特定功能创建自己的 CDP Domain，可以避免对已有的 CDP 进行侵入式修改，从而更…...

编程日记 2025/6/1 10:47:23

《基于 Python 的网页爬虫详细教程》

一、引言在当今信息时代，从互联网上获取大量有价值的数据对于许多领域的研究和分析至关重要。网页爬虫是一种自动化程序，可以从网页上抓取所需的数据。Python 作为一种强大的编程语言，拥有丰富的库和工具，使得网页爬虫的开发变得…...

编程日记 2025/5/30 3:20:58

前端知识图谱 - JavaScript基础（变量和类型）

变量和类型 1. JavaScript 规定了几种语言类型？ JavaScript 语言的每一个值都属于某一种数据类型，它规定了 7 种语言类型。语言类型广泛用于变量、函数参数、表达式、函数返回值等场合，根据最新的语言标准，这 7 种语言类型如下&…...

编程日记 2025/5/27 21:01:13

五十个网络安全学习项目——（九）无线网络安全分析

五十个网络安全学习项目——（九）无线网络安全分析这个系列灵感来源是：50个网络安全项目创意：覆盖新手至专家级，本人打算把这些项目都做一遍，做好记录，也算是对自己的提升。本文将对WAPI 协议…...

编程日记 2025/5/29 1:31:13

10. 考勤信息

题目描述公司用一个字符串来表示员工的出勤信息 absent:缺勤late: 迟到leaveearly: 早退present: 正常上班现需根据员工出勤信息，判断本次是否能获得出勤奖，能获得出勤奖的条件如下: 缺勤不超过一次，没有连续的迟到/早退:任意连续7次考勤&a…...

编程日记 2025/5/30 7:18:09

相关文章：