js 实现将后端请求来的 Blob 数据保存到用户选择的任意目录
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() 方法用于显示一个文件选择器,以允许用户保存一个文件。可以选择一个已有文件覆盖保存…...
【LLM之RAG】RAT论文阅读笔记
研究背景 近年来,大型语言模型(LLMs)在各种自然语言推理任务上取得了显著进展,尤其是在结合大规模模型和复杂提示策略(如链式思维提示(CoT))时。然而,LLMs 在推理的事实…...
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右键选择标注类型,从上到下为多边形(常…...
Python实现基于深度学习的电影推荐系统
Python实现基于深度学习的电影推荐系统 项目背景 在数字化娱乐时代,用户面临着海量的电影选择。为了帮助用户找到符合个人口味的佳片,MovieRecommendation项目提供了一个基于深度学习的个性化电影推荐系统。该系统利用深度学习技术,根据用户…...
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别名…...
Seaborn:数据可视化的强大工具
文章目录 引言Seaborn的原理1. 底层结构2. 数据集成3. 图形类型 Seaborn的使用1. 安装与导入2. 数据加载与探索3. 绘制图形分布图关系图分类图 4. 图形定制5. 导出图形 结论 引言 在数据分析和科学计算领域,数据可视化是一个至关重要的步骤。它能够帮助我们更直观地…...
图解注意力
图解注意力 Part #2: The Illustrated Self-Attention 在文章前面的部分,我们展示了这张图片来展示自注意力被应用于正在处理单词"it"的一层中: 在本节中,我们将看看这是如何完成的。请注意,我们将以一种试图理解单…...
Typora Markdown编辑器 for Mac v1.8.10 安装
Mac分享吧 文章目录 效果一、准备工作二、开始安装1、双击运行软件,将其从左侧拖入右侧文件夹中,等待安装完毕2. 应用程序显示软件图标,表示安装成功 三、运行调试1、修改主题2、显示文档列表,如下图3、查看版本信息 **安装完成&…...
代码随想录算法训练营Day46|动态规划:121.买卖股票的最佳时机I、122.买卖股票的最佳时机II、123.买卖股票的最佳时机III
买卖股票的最佳时机I 121. 买卖股票的最佳时机 - 力扣(LeetCode) 之前用贪心算法做过相同的题,这次考虑使用动态规划来完成。 dp[i]表示前i天的最大利润 我们已知每一天的价格price[i],则dp[i]为每一天的价格price[i]减去当初…...
hive on spark 记录
环境: 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…...
【计算机网络体系结构】计算机网络体系结构实验-DHCP实验
服务器ip地址 2. 服务器地址池 3. 客户端ip 4. ping Ipconfig...
攻防世界-pdf
方法一:打开是pdf格式的文件,里面有一张图,题目提示图下面什么都没有?emmm用chrom打开pdf——ctrlf搜索flag,里面是有东西的,ctrla复制就可以了。 方法二:题目提示图下面什么都没有,…...
关于后端幂等性问题分析与总结
后端幂等性(Idempotency)是指对系统执行一次操作或多次执行相同的操作,其结果始终如一。在分布式系统和API设计中,这是一个关键概念,因为它能保证用户无论请求被路由到哪个节点,多次执行相同的请求都不会导…...
2024广东省职业技能大赛云计算赛项实战——容器云平台搭建
容器云平台搭建 前言 容器镜像使用的是斗学培训平台提供的镜像包,这东西网上都没有,一堆人要,我是靠自己想的方法获取到了,也不敢给。你们可以通过在这个网站申请环境进行操作https://ncc.douxuedu.com/ 虚拟机使用的是自行创建…...
手持弹幕LED滚动字幕屏夜店表白手灯接机微信抖音小程序开源版开发
手持弹幕LED滚动字幕屏夜店表白手灯接机微信抖音小程序开源版开发 专业版 插件版 手持弹幕小程序通常提供多种功能,以便用户在不同的场合如夜店、表白、接机等使用。以下是一些常见的功能列表: 文本输入: 输入要显示的文字内容,…...
红队内网攻防渗透:内网渗透之内网对抗:代理通讯篇无外网或不可达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…...
PHP学习总结-入门篇
PHP简介 PHP (Hypertext Preprocessor),即“超文本预处理器”。PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。PHP语法吸收了C语言、Java和Perl的特点,便于学习。PHP 是开源免费的,主要适用于Web开发领域,使用广泛。…...
IDEA Plugins中搜索不到插件解决办法
IDEA中搜不到插件有三种解决方案: 设置HTTP选项,可以通过File->Settings->Plugins->⚙->HTTP Proxy Settings进行设置 具体可参考这篇博文:IDEA Plugins中搜索不到插件解决办法本地安装,ile->Settings->Plugin…...
SpringBootWeb 篇-入门了解 Vue 前端工程的创建与基本使用
🔥博客主页: 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 基于脚手架创建前端工程 1.1 基于 Vue 开发前端项目的环境要求 1.2 前端工程创建的方式 1.2.1 基于命令的方式来创建前端工程 1.2.2 使用图形化来创建前端工程 1.…...
折线统计图 初级
此为折线统计图的初级题目。 本次的题目较难,菜鸡请退出。 4. 下图显示了甲、乙两台电脑的价格以及它们已使用的年数,从图中可以知道( )。 15. 妈妈去菜市场买菜,走到半路遇到一位熟人聊了一会儿,突然发现忘了带钱。于是马上回…...
MySQL中LOCATE()函数的5个实用场景解析
1. 初识LOCATE()函数:MySQL中的字符串定位利器 第一次接触LOCATE()函数是在处理用户评论系统的时候。当时需要快速找到特定关键词在长文本中的位置,手动遍历字符串简直让人抓狂。LOCATE()就像字符串世界里的GPS,能精准告诉你目标子串的坐标。…...
找不到msvcr120.dll解决方法:2026年有效的一键修复与手动安装步骤
正玩着游戏或做着设计图,屏幕突然弹出“找不到msvcr120.dll”的提示,相信很多Windows用户都遇到过这种令人抓狂的时刻。这个错误意味着你的电脑缺少了某个软件或游戏运行所必需的“零件”。别担心,这个零件就是Microsoft Visual C 2013运行库…...
CoPaw持续学习(Continual Learning)实践:让模型记住新知识而不遗忘
CoPaw持续学习(Continual Learning)实践:让模型记住新知识而不遗忘 1. 为什么需要持续学习? 想象一下,你教会了一只小狗坐下和握手的指令。但当你开始教它新的技能"装死"时,它却完全忘记了之前…...
告别手动逐个校验,用快马快速构建vmware密钥批量验证工具提升效率
告别手动逐个校验,用快马快速构建vmware密钥批量验证工具提升效率 最近在帮朋友处理一批VMware16的密钥验证工作,发现手动逐个检查不仅耗时耗力,还容易出错。特别是当需要验证几十甚至上百个密钥时,这种重复劳动简直让人崩溃。于…...
2026 年 GEO 优化公司推荐:6家服务商综合实力对比分析
一、GEO 行业进入合规技术双轮驱动的爆发期IDC 最新发布的《2026年全球生成式引擎优化市场报告》显示,2026年全球 GEO(生成式引擎优化)市场规模将达 220 亿美元,年复合增长率高达 122%,中国市场规模预计突破 480 亿元&…...
大海捞针:从海量真实世界5G-A基站数据中追踪无人机
大家读完觉得有帮助记得关注和 点赞!!! 摘要 无人机在日常生活中的潜在应用使得对其监控变得至关重要。然而,现有的无人机监控系统通常依赖于摄像头、激光雷达或雷达,这些系统的感知范围有限或部署成本高昂࿰…...
Phi-3-mini-4k-instruct-gguf完整指南:模型原理、部署、调参、运维一体化
Phi-3-mini-4k-instruct-gguf完整指南:模型原理、部署、调参、运维一体化 1. 模型概述 Phi-3-mini-4k-instruct-gguf是微软Phi-3系列中的轻量级文本生成模型GGUF版本。这个模型特别适合处理问答、文本改写、摘要整理和简短创作等任务。相比完整版模型,…...
Qwen3-Embedding-4B GPU算力优化:CUDA Stream并发执行向量化与相似度计算,吞吐提升1.8倍
Qwen3-Embedding-4B GPU算力优化:CUDA Stream并发执行向量化与相似度计算,吞吐提升1.8倍 1. 引言:当语义搜索遇上性能瓶颈 想象一下,你正在使用一个智能语义搜索工具,输入“我想吃点东西”,它立刻为你找到…...
Qwen-Image-Edit-2511-Unblur-Upscale惊艳效果:模糊图片一键高清化
Qwen-Image-Edit-2511-Unblur-Upscale惊艳效果:模糊图片一键高清化 1. 效果展示:从模糊到高清的魔法 你是否遇到过这样的情况?手机里珍藏的老照片因为年代久远变得模糊不清,或是匆忙拍摄的珍贵瞬间因为手抖而糊成一片。现在&…...
Pixel Fashion Atelier新手教程:RPG式交互界面操作全图解
Pixel Fashion Atelier新手教程:RPG式交互界面操作全图解 1. 认识像素时装锻造坊 Pixel Fashion Atelier是一款独特的AI图像生成工具,它将传统的AI绘图技术与复古日系RPG游戏界面完美融合。不同于市面上常见的暗色调AI工具,这款应用采用了明…...
