在js中实现下载base64数据，兼容低版本
详细步骤如下
1、解析 Base64 数据：
- 如果数据流中包含前缀 data:…;base64,，先分离 MIME 类型和 Base64 数据部分。
- 如果没有前缀，假设默认 MIME 类型（如 application/octet-stream）。
2、Base64 解码：
- 使用 atob 将 Base64 字符串解码为二进制字符串。
- 将二进制字符串转为 Uint8Array。
3、生成 Blob：
- 将二进制数据创建为 Blob 对象，指定类型（如 text/plain）。
4、触发下载：
- 使用 URL.createObjectURL 创建 Blob 对象的临时 URL。
- 动态创建 元素，设置其 href 属性为临时 URL，指定文件名，触发点击事件下载。
5、清理临时资源：
- 下载完成后，移除 元素并释放临时 URL。
实现代码如下:
function downloadBase64Data(base64Data, fileName) {try {// 检查 Base64 数据是否包含前缀（如 data:...;base64,）let mimeType = '';let base64String = '';if (base64Data.includes(',')) {const [metadata, data] = base64Data.split(',');mimeType = metadata.match(/:(.*?);/)[1]; // 提取 MIME 类型base64String = data; // 仅取 Base64 数据部分} else {// 如果没有前缀，默认为某种 MIME 类型，例如 application/octet-streammimeType = 'application/octet-stream';base64String = base64Data;}// Base64 解码const binaryString = atob(base64String); // 解码 Base64const binaryData = new Uint8Array(binaryString.length);for (let i = 0; i < binaryString.length; i++) {binaryData[i] = binaryString.charCodeAt(i);}// 创建 Blob 对象const blob = new Blob([binaryData], { type: mimeType });// 使用 Blob 创建临时 URLconst url = URL.createObjectURL(blob);// 创建 <a> 元素并触发下载const a = document.createElement('a');a.href = url;a.download = fileName;document.body.appendChild(a); // 必须将其添加到 DOM 中a.click();// 清理document.body.removeChild(a);URL.revokeObjectURL(url);console.log('文件下载成功');} catch (error) {console.error('下载失败:', error.message);}
}// 示例用法
const base64Data = 'data:text/plain;base64,SGVsbG8sIFdvcmxkIQ=='; // 示例 Base64 数据
const fileName = 'example.txt';
downloadBase64Data(base64Data, fileName);
优势
- 无 API 依赖：适合直接处理纯 Base64 数据流。
- 兼容性高：支持现代浏览器（Chrome、Firefox、Edge）。
注意事项
- 文件名：确保 fileName 是用户友好的文件名，并包含扩展名。
- 性能问题：对于较大的 Base64 数据，内存占用会较高。
- 安全性：确保 Base64 数据可信，避免处理恶意输入。
相关文章：
在js中实现下载base64数据，兼容低版本
详细步骤如下 1、解析 Base64 数据： 如果数据流中包含前缀 data:…;base64,，先分离 MIME 类型和 Base64 数据部分。如果没有前缀，假设默认 MIME 类型（如 application/octet-stream）。 2、Base64 解码： 使…...
垃圾分割数据集labelme格式659张1类别
数据集格式：labelme格式(不包含mask文件，仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数)：659 标注数量(json文件个数)：659 标注类别数：1 标注类别名称:["garbage"] 每个类别标注的框数&#…...
深入探索 npm cache clean --force：清理 npm 缓存的艺术
npm 是 JavaScript 编程语言的包管理器，它是 Node.js 运行环境的默认包管理器。npm 提供了一个丰富的生态系统，包括数以百万计的可重用代码包。然而，随着时间的推移，npm 的缓存可能会变得庞大，影响性能或导致一些奇怪的…...
Flink中并行度和slot的关系——任务和任务槽
一、任务槽（task slots) Flink的每一个TaskManager是一个JVM进程，在其上可以运行多个线程（任务task），那么每个线程可以拥有多少进程资源呢？任务槽就是这样一个概念，对taskManager上每个任务运行…...
22【AUTOSAR自适应平台设计的概述01】杂项概念介绍
1.AUTOSAR自适应平台设计的概述 本小课题主要是让读者对AUTOSAR自适应平台设计的思路有个宏观的概念，不拘泥于具体的技术细节。 总结如下： 概述AUTOSAR自适应平台（AP）的设计。为AP用户和实施者提供总体设计和关键概念2.具体的章节由以下几个部分组成： 技术范围和方法： 介…...
基础运维学习计划-base版
目录 需要学习的内容？ liunx基础 sql/mysql基础 tcp/ip协议基础 http基础 dns基础 网络基础：交换&路由概念&原理 常见网络协议 月学习计划 12.26 日 （bilibili自己找视频看看，资源很多） 12.27日 1…...
Golang的发展历程
Golang的发展历程可以分为以下几个阶段： 设计阶段：2007年，Google开始研究开发一种新的编程语言，主要出于对C和Java等编程语言的不足之处的反思。经过一年多的研究和讨论，Golang的设计方案得到确定，主要包括…...
数据结构之线性表之顺序表
定义： 由n（n>0）个数据特性相同的元素构成的有限序列称为线性表 简单来说n个相同数据类型的数据组wsw合在一起的这么一个集合就是一个线性表 线性表包括顺序表和链表 1. 顺序表（我们所有的代码实现都用函数来封装）…...
GESP202309 二级【小杨的 X 字矩阵】题解（AC）
》》》点我查看「视频」详解》》》 [GESP202309 二级] 小杨的 X 字矩阵 题目描述 小杨想要构造一个 的 X 字矩阵（ 为奇数），这个矩阵的两条对角线都是半角加号 ，其余都是半角减号 - 。例如，一个 5 5 5 \times 5 5…...
流量主微信小程序工具类去水印
工具类微信小程序流量主带后台管理，可开通广告，带自有后台管理，不借助第三方接口 介绍 支持抖音，小红书，哔哩哔哩视频水印去除，功能实现不借助第三方平台。可实现微信小程序流量主广告变现功能，…...
Es搭建——单节点——Linux
Es搭建——单节点——Linux 一、安装 下载安装包： 官网下载地址：https://www.elastic.co/downloads/elasticsearch 上传包到linux 切换到安装目录下 解压：tar -zxvf elasticsearch-7.17.1-linux-x86_64.tar.gz 重命名安装文件夹 mv elastics…...
linux安装idea
参考原网址：在Linux系统中安装idea教程_idea linux-CSDN博客 1.下载idea Download IntelliJ IDEA – The Leading Java and Kotlin IDE 选择Download，下载正确的文件名：ideaIU-2024.3.1.1.tar.gz 2.安装vim sudo apt install vim 3.解压…...
PLSQL 客户端连接 Oracle 数据库配置
1. 安装Oracle客户端 首先，安装Oracle客户端。可以从Oracle官方网站下载Oracle Instant Client, 安装完成后，请记住安装路径，因为将在后续步骤中需要用到它。 2. 配置环境变量 添加环境变量 ORACLE_HOME 安装Oracle客户端后，配…...
C#调用OpenXml，读取excel行数据，遇到空单元跳过现象处理
问题及现象 在OpenXML中文件不包含空白单元格的条目，这就是跳过空白单元格的原因。 所以如果当我们打开一个excel，读取一个表格数据，发现如果有空单元格，openXML会跳过导致读取的数据发生错位。 比如这个是原始的excel表格数据…...
【计算机视觉CV-图像分类】06 - VGGNet的鲜花分类实现：从数据预处理到模型优化的完整实战！
目录 引言 VGGNet概述 VGGNet的网络架构 基于预训练VGGNet的五类鲜花分类实现 4.1 数据准备与预处理 4.2 模型实例化与参数调整 4.3 模型训练与保存最优模型 4.4 模型导入与预测 4.5 训练过程的可视化 模型优化与防止过拟合 总结与展望 参考文献 引言 在计算机视觉…...
QT 控件定义为智能指针引发的bug
问题描述： std::unique_ptr<QStackedLayout> m_stacked_layout; 如上为定义； 调用： Line13ABClient::Line13ABClient(QWidget *parent) : BaseWidget(parent) { // 成员变量初始化 m_get_ready false; m_tittle_wnd…...
@register_model 装饰器
使用 register_model 装饰器来注册模型类有以下几个优势： 自动化注册： 通过装饰器自动将模型类注册到一个全局字典中，避免了手动注册的繁琐操作，使代码更加简洁和易于维护。 易于扩展： 可以方便地添加新模型ÿ…...
图像处理-Ch7-图像金字塔和其他变换
Ch7 小波变换&其他图像变换 文章目录 Ch7 小波变换&其他图像变换背景知识(bk)图像金字塔(Image Pyramid)子带编码(Sub-band Coding)Z - 变换(线性变换)完美重建滤波器组(PCFB, Perfect Construction Filter Banks)有限脉冲响应（FIR）滤波器双正交…...
解决在vue3+vite+element-plus 中echarts在el-dialog无法正常显示问题
核心：在dom加载完成后调用echarts实例 的resize()方法 这里是一个例子 这里封装一个echarts <template><div class"container" ref"container"></div> </template> <script lang"ts" setup> import {…...
SQL进阶技巧：如何计算摆动的序列？| LeetCode 376.-摆动序列
目录 0 摆动序列 1 数据准备 2 问题分析 3 小结 0 摆动序列 原题链接：376. 摆动序列 - 力扣（LeetCode） 如果连续数字之间的差严格地在正数和负数之间交替，则数字序列称为 摆动序列 。第一个差（如果存在的话）可能是正数或负数。仅有一个元素或者含两个不等元素的…...
告别卡顿：探索 Java FGC 的根源与高效解决方案
Java Full Garbage Collection (FGC) 的产生原因及解决办法 引言 在Java应用程序的生命周期中，垃圾回收（Garbage Collection, GC）是确保内存有效管理的关键机制。然而，当发生Full Garbage Collection（FGC）…...
MySQL索引为什么是B+树
MySQL索引为什么是B树 索引是帮助MySQL高效获取数据的数据结构，在数据之外，数据库还维护着满足特定查找算法的数据结构B树，这些数据结果以某种特定的方式引用数据，这样就可以在这些数据结构上实现高级查找算法，提升数据…...
准备考试：解决大学入学考试问题
引言 在编程竞赛和算法挑战中，我们经常会遇到各种类型的组合问题。这些问题不仅考验我们的逻辑思维能力，还要求我们熟练掌握数据结构和算法。在这篇文章中，我们将探讨一个有趣的问题——“准备考试”，这个问题来自于一个虚构的情…...
vue3中如何自定义插件
英译汉插件 i18n.ts export default {install: (app: any, options: any) > {// 注入一个全局可用的$translate()方法app.config.globalProperties.$translate (key: string) > {// 获取options对象的深层属性// 使用key作为索引return key.split(".").redu…...
Linux应用软件编程-多任务处理（进程）
多任务：让系统具备同时处理多个事件的能力。让系统具备并发性能。方法：进程和线程。这里先讲进程。 进程（process）：正在执行的程序，执行过程中需要消耗内存和CPU。 进程的创建：操作系统在进程创…...
PyCharm专项训练5 最短路径算法
一、实验目的 本文的实验目的是通过编程实践，掌握并应用Dijkstra（迪杰斯特拉）算法和Floyd（弗洛伊德）算法来解决图论中的最短路径问题。 二、实验内容 数据准备： 使用邻接表的形式定义两个图graph_dijkstra…...
“AI+Security”系列第4期（一）之“洞” 见未来：AI 驱动的漏洞挖掘新范式
在数字化浪潮下，安全漏洞问题日益严峻，成为各行业发展的重大挑战。近日，“AISecurity” 系列第 4 期线下活动于北京成功举办，聚焦 “洞” 见未来：AI 驱动的漏洞挖掘新范式，汇聚了安全领域的众多专家。 本次…...
安卓蓝牙扫描流程
目录 系统广播 流程图 源码跟踪 系统广播 扫描开启广播：BluetoothAdapter.ACTION_DISCOVERY_STARTED "android.bluetooth.adapter.action.DISCOVERY_STARTED";扫描关闭广播：BluetoothAdapter.ACTION_DISCOVERY_FINISHED "android.b…...
【视觉惯性SLAM：对极几何】
对极几何（Epipolar Geometry）介绍 对极几何是立体视觉中的核心内容之一，它描述了两个相机在观察同一个三维场景时，成像平面之间的几何关系。对极几何能够约束图像中对应点的位置关系，是双目立体匹配、三维重建、以及位…...
` 和 `Stream.toList()` 的区别（Java）)
Stream `Collectors.toList()` 和 `Stream.toList()` 的区别（Java）
Stream Collectors.toList() 和 Stream.toList() 的区别 问题背景 在以下代码中： Test void test() {JSONArray nodes new JSONArray();String[] names {"df1", "df2", "df3"};for (String name : names) {JSONObject obj new …...
【Python知识】Python面向对象编程知识
Python面向对象编程知识 概述1. 类（Class）2. 对象（Object）3. 封装（Encapsulation）4. 继承（Inheritance）5. 多态（Polymorphism）6. 抽象（Abstractio…...
安卓帧率获取
背景 性能优化，经常用到一些指标，诸如帧率、功耗等。对于普通app来讲， 之前一直使用gfxinfo指令获取丢帧率。但是这个指令无法获取游戏的帧率，查阅资料，发现SurfaceFlinger可以获取游戏帧率。 帧率获取原理 获取当前f…...
)
shell脚本(全)
shell脚本概述 第一个shell脚本 shell注释 shell变量 shell位置参数 shell字符串 shell内置命令 shell命令替换 输出 流程控制IF export命令 退出脚本 运行Shell脚本 实例导航 shell脚本概述 在说什么是shell脚本之前，先说说什么是shell。 从程序员的…...
Flask-----SQLAlchemy教程
存session session[username] username # 存储数据到 session 取session username session.get(username) render_template return render_template(index.html, usernameAlice)，渲染一个包含 username 变量的模板。 redirect return redirect(url_for(profil…...
【C++11】可变模板参数
目录 可变模板的定义方式 参数包的展开方式 递归的方式展开参数包 STL中的emplace相关接口函数 STL容器中emplace相关插入接口函数 编辑 模拟实现：emplace接口 C11的新特性可变参数模板能够让您创建可以接受可变参数的函数模板和类模板，相比 C9…...
.NET开发人员学习书籍推荐
作为一名.NET开发人员，掌握相关技术是提升开发能力和拓展职业发展的关键。无论你是刚入门的新人，还是希望精进技术的资深开发者，选择合适的学习资源至关重要。下面是一些经典且实用的学习书籍推荐，帮助你在C#、SQL、前端开发等方面…...
jupyter切换内核方法配置问题总结
下面这个博客总结了3种不同的方法，很有调理，推荐尝试 【最全指南】如何在 Jupyter Notebook 中切换/使用 conda 虚拟环境？ !!! 注意使用上面介绍的ipykernel方法2, 要在每一个希望被jupyter识别到的环境内【分别】安装ipykernel以及添加配置 …...
SVM理论推导
本文介绍支持向量机（SVM）的理论推导。 一、SVM 的基本思想 SVM 的目标是找到一个最优超平面，将样本分为不同的类别，并最大化类别间的间隔。 1. 线性可分情况下： 在特征空间中找到一个超平面，使得&#…...
如何永久解决Apache Struts文件上传漏洞
Apache Struts又双叒叕爆文件上传漏洞了。 自Apache Struts框架发布以来，就存在多个版本的漏洞，其中一些漏洞涉及到文件上传功能。这些漏洞可能允许攻击者通过构造特定的请求来绕过安全限制，从而上传恶意文件。虽然每次官方都发布补丁进行修…...
【Java数据结构与算法】第10-14章
第10章 树结构的基础部分 10.1 二叉树 10.1.1 为什么需要树这种数据结构 10.1.2 树示意图 10.1.3 二叉树的概念 10.1.4 二叉树遍历的说明 10.1.5 二叉树遍历应用实例(前序,中序,后序) 10.1.6 二叉树-查找指定节点 思路图解 10.1.7 二叉树-删除节点 package com.atguigu.tree;…...
MacOS M3源代码编译Qt6.8.1
编译时间过长，如果不想自己编译，可以通过如果网盘进行下载： 链接: https://pan.baidu.com/s/17lvF5jQ-vR6vE-KEchzrVA?pwdts26 提取码: ts26 在macOS上编译Qt 6需要一些前置步骤和工具。以下是编译Qt 6的基本步骤： 安装Xcode和…...
3.银河麒麟V10 离线安装Nginx
1. 下载nginx离线安装包 前往官网下载离线压缩包 2. 下载3个依赖 openssl依赖，前往 官网下载 pcre2依赖下载，前往Git下载 zlib依赖下载，前往Git下载 下载完成后完整的包如下： 如果网速下载不到请使用网盘下载 通过网盘分享的文件…...
实现 QTreeWidget 中子节点勾选状态的递归更新功能只影响跟节点的状态父节点状态不受影响
在 Qt 开发中，QTreeWidget 提供了树形结构的显示和交互功能。为了实现某个子节点勾选或取消勾选时，只影响当前节点及其子节点的状态，同时递归更新父节点的状态以正确显示 Qt::PartiallyChecked 或 Qt::Checked，我们可以借助 Qt 的…...
ubuntu24.04使用opencv4
ubuntu24.04LTS自带opencv4.5代码实例 //opencv_example.cpp #include <opencv2/opencv.hpp> #include <iostream>int main() {// 读取图像cv::Mat img cv::imread("image.jpg", cv::IMREAD_COLOR);if (img.empty()) {std::cerr << "无法读…...
R语言数据分析案例46-不同区域教育情况回归分析和探索
一、研究背景 教育是社会发展的基石，对国家和地区的经济、文化以及社会进步起着至关重要的作用。在全球一体化进程加速的今天，不同区域的教育发展水平呈现出多样化的态势。这种差异不仅体现在教育资源的分配上，还表现在教育成果、教育投入与…...
flink sink doris
接上文：一文说清flink从编码到部署上线 网上关于flink sink drois的例子较多，大部分不太全面，故本文详细说明，且提供完整代码。 flink doris版本对照表 1.添加依赖 <!--doris cdc--><!-- 参考："https…...
《探索 Apache Spark MLlib 与 Java 结合的卓越之道》
在当今大数据与人工智能蓬勃发展的时代，Apache Spark MLlib 作为强大的机器学习库，与广泛应用的 Java 语言相结合，为数据科学家和开发者们提供了丰富的可能性。那么，Apache Spark MLlib 与 Java 结合的最佳实践究竟是什么呢&#…...
Net9解决Spire.Pdf替换文字后，文件格式乱掉解决方法
官方文档 https://www.e-iceblue.com/Tutorials/Spire.PDF/Program-Guide/Text/Find-and-replace-text-on-PDF-document-in-C.html C# 在 PDF 中查找替换文本 原文件如下图，替换第一行的新编码，把41230441044替换为41230441000 替换代码如下ÿ…...
)
Kafka可视化工具 Offset Explorer (以前叫Kafka Tool)
数据的存储是基于 主题（Topic） 和 分区（Partition） 的 Kafka是一个高可靠性的分布式消息系统，广泛应用于大规模数据处理和实时, 为了更方便地管理和监控Kafka集群，开发人员和运维人员经常需要使用可视化工具…...
青少年编程与数学 02-004 Go语言Web编程 21课题、应用部署
青少年编程与数学 02-004 Go语言Web编程 21课题、应用部署 一、应用部署二、GoWeb部署到WINDOWS系统中1. 安装Go环境2. 创建并编写Go Web应用3. 初始化Go模块4. 编译Go Web应用5. 配置和运行Nginx6. 运行Go Web应用7. 访问应用总结 三、GoWeb部署到LINUX系统中1. 准备Linux服务…...