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

js 实现将后端请求来的 Blob 数据保存到用户选择的任意目录

news 2026/5/17 19:16:56

js实现将后端请求来的 Blob 数据保存到用户选择的任意目录

    • 实现方式

实现方式

在这里插入图片描述

实现方式是使用 window 的 showSaveFilePicker 方法。Window 接口的 showSaveFilePicker() 方法用于显示一个文件选择器，以允许用户保存一个文件。可以选择一个已有文件覆盖保存，也可以输入名字新建一个文件。

具体示例如下：

使用 fetch 或者 axios 从后端获取 Blob 数据。
使用 showSaveFilePicker 让用户选择保存文件的位置。
将 Blob 数据写入用户选择的文件。
以下是一个完整的示例代码：

<!DOCTYPE html>
<html><head><title>js实现将后端请求来的 Blob 数据保存到用户选择的任意目录</title>
</head><body><h2>js实现将后端请求来的 Blob 数据保存到用户选择的任意目录</h2><button onclick="saveBlobFromServer()">保存文件</button><script>async function saveBlobFromServer() {try {// 1: 从后端获取 Blob 数据，这里就直接模拟一个 Blob 数据const obj = { hello: "world" };const blob = new Blob([JSON.stringify(obj, null, 2)], {type: "application/json",});// 2: 显示文件保存选择器。这段代码显示文件保存对话框，允许用户选择保存文件的位置和名称。const opts = {suggestedName: 'downloaded-file',types: [{// 建议的文件名description: "文件",// 允许选择的文件类型的数组accept: {"text/plain": [".txt"],"application/pdf": [".pdf"],"image/jpeg": [".jpg", ".jpeg"],"image/png": [".png"],},},],excludeAcceptAllOption: true,};const fileHandle = await window.showSaveFilePicker(opts);// 3: 创建一个可写流，并将 Blob 数据写入用户选择的文件中。const writableStream = await fileHandle.createWritable();await writableStream.write(blob);await writableStream.close();console.log('文件保存成功');} catch (error) {console.error('文件保存失败:', error);}}</script>
</body></html>
  • 注意
    showSaveFilePicker 是一个实验性 API，可能并不在所有浏览器中都可用。请确保在支持的环境中使用。
    你可能需要在 HTTPS 环境下运行此代码，因为许多现代浏览器要求文件系统 API 在安全上下文中使用。

相关文章：

js 实现将后端请求来的 Blob 数据保存到用户选择的任意目录

js实现将后端请求来的 Blob 数据保存到用户选择的任意目录 实现方式 实现方式 实现方式是使用 window 的 showSaveFilePicker 方法。Window 接口的 showSaveFilePicker() 方法用于显示一个文件选择器&#xff0c;以允许用户保存一个文件。可以选择一个已有文件覆盖保存&#xf…...

编程日记 2024/6/24 0:59:45

【LLM之RAG】RAT论文阅读笔记

研究背景 近年来&#xff0c;大型语言模型&#xff08;LLMs&#xff09;在各种自然语言推理任务上取得了显著进展&#xff0c;尤其是在结合大规模模型和复杂提示策略&#xff08;如链式思维提示&#xff08;CoT&#xff09;&#xff09;时。然而&#xff0c;LLMs 在推理的事实…...

编程日记 2024/6/24 0:58:43

windows anaconda 安装 Labelme

安装 # 创建环境 conda create -n labelme python3.6 #激活环境 conda activate labelme # 安装依赖 conda install pyqt conda install pillow # 安装labelme conda install labelme3.16.2 # 启动labelme labelme右键选择标注类型&#xff0c;从上到下为多边形&#xff08;常…...

编程日记 2024/6/24 0:57:42

Python实现基于深度学习的电影推荐系统

Python实现基于深度学习的电影推荐系统 项目背景 在数字化娱乐时代&#xff0c;用户面临着海量的电影选择。为了帮助用户找到符合个人口味的佳片&#xff0c;MovieRecommendation项目提供了一个基于深度学习的个性化电影推荐系统。该系统利用深度学习技术&#xff0c;根据用户…...

编程日记 2024/6/24 0:54:38

C++ (week9)：Git

文章目录 1.git介绍2.git安装3.git配置4.获取自己的SSH公钥5.新建仓库6.邀请开发者7.克隆远程仓库到本地8.在本地进行开发9.本地项目推送到远程仓库10.git的工作原理11.分支管理(1)合作开发的方式(2)分支管理(3)分支合并的原理、冲突管理 12.git 与 svn 的区别13.设置alias别名…...

编程日记 2024/6/24 0:52:36

Seaborn：数据可视化的强大工具

文章目录 引言Seaborn的原理1. 底层结构2. 数据集成3. 图形类型 Seaborn的使用1. 安装与导入2. 数据加载与探索3. 绘制图形分布图关系图分类图 4. 图形定制5. 导出图形 结论 引言 在数据分析和科学计算领域&#xff0c;数据可视化是一个至关重要的步骤。它能够帮助我们更直观地…...

编程日记 2024/6/24 0:50:33

图解注意力

图解注意力 Part #2: The Illustrated Self-Attention 在文章前面的部分&#xff0c;我们展示了这张图片来展示自注意力被应用于正在处理单词"it"的一层中&#xff1a; 在本节中&#xff0c;我们将看看这是如何完成的。请注意&#xff0c;我们将以一种试图理解单…...

编程日记 2024/6/24 0:49:32

Typora Markdown编辑器 for Mac v1.8.10 安装

Mac分享吧 文章目录 效果一、准备工作二、开始安装1、双击运行软件&#xff0c;将其从左侧拖入右侧文件夹中&#xff0c;等待安装完毕2. 应用程序显示软件图标&#xff0c;表示安装成功 三、运行调试1、修改主题2、显示文档列表&#xff0c;如下图3、查看版本信息 **安装完成&…...

编程日记 2024/6/24 0:48:31

代码随想录算法训练营Day46|动态规划：121.买卖股票的最佳时机I、122.买卖股票的最佳时机II、123.买卖股票的最佳时机III

买卖股票的最佳时机I 121. 买卖股票的最佳时机 - 力扣&#xff08;LeetCode&#xff09; 之前用贪心算法做过相同的题&#xff0c;这次考虑使用动态规划来完成。 dp[i]表示前i天的最大利润 我们已知每一天的价格price[i]&#xff0c;则dp[i]为每一天的价格price[i]减去当初…...

编程日记 2024/6/24 0:46:29

hive on spark 记录

环境&#xff1a; hadoop 2.7.2 spark-without-hadoop 2.4.6 hive 2.3.4 hive-site.xml <property><name>hive.execution.engine</name><value>spark</value> </property> <property><name>spark.yarn.jars</name>&l…...

编程日记 2024/6/24 0:45:27

【计算机网络体系结构】计算机网络体系结构实验-DHCP实验

服务器ip地址 2. 服务器地址池 3. 客户端ip 4. ping Ipconfig...

编程日记 2024/6/24 0:43:23

攻防世界-pdf

方法一&#xff1a;打开是pdf格式的文件&#xff0c;里面有一张图&#xff0c;题目提示图下面什么都没有&#xff1f;emmm用chrom打开pdf——ctrlf搜索flag&#xff0c;里面是有东西的&#xff0c;ctrla复制就可以了。 方法二&#xff1a;题目提示图下面什么都没有&#xff0c;…...

编程日记 2024/6/24 0:41:21

关于后端幂等性问题分析与总结

后端幂等性&#xff08;Idempotency&#xff09;是指对系统执行一次操作或多次执行相同的操作&#xff0c;其结果始终如一。在分布式系统和API设计中&#xff0c;这是一个关键概念&#xff0c;因为它能保证用户无论请求被路由到哪个节点&#xff0c;多次执行相同的请求都不会导…...

编程日记 2024/6/24 0:38:17

2024广东省职业技能大赛云计算赛项实战——容器云平台搭建

容器云平台搭建 前言 容器镜像使用的是斗学培训平台提供的镜像包&#xff0c;这东西网上都没有&#xff0c;一堆人要&#xff0c;我是靠自己想的方法获取到了&#xff0c;也不敢给。你们可以通过在这个网站申请环境进行操作https://ncc.douxuedu.com/ 虚拟机使用的是自行创建…...

编程日记 2024/6/24 0:37:15

手持弹幕LED滚动字幕屏夜店表白手灯接机微信抖音小程序开源版开发

手持弹幕LED滚动字幕屏夜店表白手灯接机微信抖音小程序开源版开发 专业版 插件版 手持弹幕小程序通常提供多种功能&#xff0c;以便用户在不同的场合如夜店、表白、接机等使用。以下是一些常见的功能列表&#xff1a; 文本输入&#xff1a; 输入要显示的文字内容&#xff0c;…...

编程日记 2024/6/24 0:36:14

红队内网攻防渗透：内网渗透之内网对抗：代理通讯篇无外网或不可达SockS全协议规则配置C2正反向上线解决方案

红队内网攻防渗透 1. 内网代理通讯1.1 网络不可达实战环境模拟1.1.1 CS代理技术-SockS配置-网络不可达-通讯解决1.1.1.1 反向shell上线入口点主机1.1.1.2 入口点CS搭建sokcs4代理1.1.1.3 本地使用Proxifier访问代理1.1.1 CS代理技术-正反向监听-网络不可达-C2上线1.1.1.4 正向s…...

编程日记 2024/6/24 0:34:12

PHP学习总结-入门篇

PHP简介 PHP (Hypertext Preprocessor)&#xff0c;即“超文本预处理器”。PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。PHP语法吸收了C语言、Java和Perl的特点&#xff0c;便于学习。PHP 是开源免费的&#xff0c;主要适用于Web开发领域&#xff0c;使用广泛。…...

编程日记 2024/6/24 0:32:10

IDEA Plugins中搜索不到插件解决办法

IDEA中搜不到插件有三种解决方案&#xff1a; 设置HTTP选项&#xff0c;可以通过File->Settings->Plugins->⚙->HTTP Proxy Settings进行设置 具体可参考这篇博文&#xff1a;IDEA Plugins中搜索不到插件解决办法本地安装&#xff0c;ile->Settings->Plugin…...

编程日记 2024/6/24 0:31:08

SpringBootWeb 篇-入门了解 Vue 前端工程的创建与基本使用

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 基于脚手架创建前端工程 1.1 基于 Vue 开发前端项目的环境要求 1.2 前端工程创建的方式 1.2.1 基于命令的方式来创建前端工程 1.2.2 使用图形化来创建前端工程 1.…...

编程日记 2024/6/24 0:30:07

折线统计图 初级

此为折线统计图的初级题目。 本次的题目较难&#xff0c;菜鸡请退出。 4. 下图显示了甲、乙两台电脑的价格以及它们已使用的年数&#xff0c;从图中可以知道( )。 15. 妈妈去菜市场买菜&#xff0c;走到半路遇到一位熟人聊了一会儿&#xff0c;突然发现忘了带钱。于是马上回…...

编程日记 2024/6/24 0:29:06

观察 Taotoken 在多地域请求下的延迟与稳定性表现

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 观察 Taotoken 在多地域请求下的延迟与稳定性表现 对于依赖大模型 API 进行开发的团队而言&#xff0c;服务的延迟与稳定性是影响开…...

编程新知 2026/5/17 11:01:44

Performance-Fish：深度解析《环世界》400%性能优化核心技术

Performance-Fish&#xff1a;深度解析《环世界》400%性能优化核心技术 【免费下载链接】Performance-Fish Performance Mod for RimWorld 项目地址: https://gitcode.com/gh_mirrors/pe/Performance-Fish Performance-Fish 是专为《环世界》&#xff08;RimWorld&#…...

编程新知 2026/5/17 9:59:23

【低功耗蓝牙】④ 蓝牙MIDI协议：从ESP32 MicroPython代码到智能乐器DIY

1. 蓝牙MIDI协议入门&#xff1a;从音乐小白到智能乐器开发者 第一次听说蓝牙MIDI协议时&#xff0c;我正盯着桌上的ESP32开发板发呆。作为一个只会弹几个和弦的编程爱好者&#xff0c;完全没想到自己能用代码"演奏"音乐。蓝牙MIDI就像音乐世界的通用语言&#xff0c…...

编程新知 2026/5/17 9:31:20

YimMenu：GTA V终极游戏增强工具完整实战手册

YimMenu&#xff1a;GTA V终极游戏增强工具完整实战手册 【免费下载链接】YimMenu YimMenu, a GTA V menu protecting against a wide ranges of the public crashes and improving the overall experience. 项目地址: https://gitcode.com/GitHub_Trending/yi/YimMenu …...

编程新知 2026/5/17 9:18:37

【CH32V307实战】4P OLED屏I2C驱动移植与快速显示指南

1. CH32V307与4P OLED屏的硬件连接指南 第一次拿到CH32V307开发板和4P OLED屏时&#xff0c;最让我头疼的就是接线问题。这种4线制OLED&#xff08;通常标注为4P或4PIN&#xff09;相比传统的7线制简化了不少&#xff0c;但引脚定义各家厂商可能略有差异。经过多次实测&#xf…...

编程新知 2026/5/17 9:18:37

5分钟掌握小红书无水印下载：让内容保存效率提升300%

5分钟掌握小红书无水印下载&#xff1a;让内容保存效率提升300% 【免费下载链接】XHS-Downloader 小红书&#xff08;XiaoHongShu、RedNote&#xff09;链接提取/作品采集工具&#xff1a;提取账号发布、收藏、点赞、专辑作品链接&#xff1b;提取搜索结果作品、用户链接&#…...

编程新知 2026/5/17 8:23:51

Windows鼠标指针主题定制：从.cur/.ani文件到个性化交互体验

1. 项目概述&#xff1a;一个为Windows终端注入灵魂的鼠标指针主题如果你和我一样&#xff0c;每天有超过8小时的时间是与Windows操作系统相伴的&#xff0c;那么你对那个千篇一律的白色箭头鼠标指针&#xff0c;恐怕早已感到审美疲劳。它就像一个沉默的、功能性的背景板&#…...

编程新知 2026/5/17 5:52:52

82.人工智能实战：大模型多环境治理怎么做？从开发、测试、预发到生产的 Prompt、模型、知识库隔离方案

人工智能实战：大模型多环境治理怎么做？从开发、测试、预发到生产的 Prompt、模型、知识库隔离方案 一、问题场景：测试环境改了 Prompt，结果生产回答变了 很多大模型项目早期只有一个环境： 一套 Prompt 一个知识库 一个模型地址 一个配置表开发、测试、运营都在同一套配置…...

编程新知 2026/5/17 5:13:15

开源婚礼技能库：用项目管理思维破解备婚焦虑，打造个性化高性价比婚礼

1. 项目概述&#xff1a;婚礼技能库的诞生与价值最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“awesome-wedding-skills”。光看名字&#xff0c;你可能会觉得这又是一个普通的“awesome”系列资源列表&#xff0c;无非是收集一些婚礼策划、摄影、化妆的链接。但当我点…...

编程新知 2026/5/17 4:07:15

ComfyUI ControlNet Aux 终极指南：30+种预处理器让AI图像生成更精准

ComfyUI ControlNet Aux 终极指南&#xff1a;30种预处理器让AI图像生成更精准 【免费下载链接】comfyui_controlnet_aux ComfyUIs ControlNet Auxiliary Preprocessors 项目地址: https://gitcode.com/gh_mirrors/co/comfyui_controlnet_aux 想让您的AI图像生成具备真实…...

编程新知 2026/5/17 3:41:40