前端将blob转换为可下载的url及下载

一.转换

javascript 复制代码
//将blob转换为url
const changeBlobToUrl = blobData => {
	return new Promise(resolve => {
		//创建Blob对象
		const blob = new Blob([blobData])

		// 创建FileReader对象
		const reader = new FileReader()

		reader.onload = function (e) {
			resolve(e.target.result)
		}

		// 使用FileReader读取Blob数据
		reader.readAsDataURL(blob)
	})
}

二.下载

javascript 复制代码
//前端下载blob的url类型文件
const downloadFileByBlobUrl = (url: string, name: string) => {
	aDownload(url, name)
	URL.revokeObjectURL(url)
}


const aDownload = (url, name) => {
	// 创建<a>元素
	const link = document.createElement("a")
	// 设置<a>元素的属性
	link.href = url
	link.download = name
	// 将<a>元素添加到文档中
	document.body.appendChild(link)
	// 触发点击事件
	link.click()
	// 移除<a>元素
	document.body.removeChild(link)
}
相关推荐
Bigfish_coding几秒前
前端转agent-第一周【python】-05 Ollama+Qwen3实战:会话记忆实战
前端
x***r1512 分钟前
.NET 10 SDK 安装教程(dotnet-sdk-10.0.100-win-x64详细步骤)
java·服务器·前端
新新技术迷3 分钟前
给 Agent 做"工具调用过程可视化",让用户看见它在干嘛
前端
feixing_fx10 分钟前
选择器的威力——深入理解优先级计算与层叠规则
开发语言·前端·css·前端框架·html
代码小库13 分钟前
【2026前端转 AI 全栈指南】第 1 章:前言 · 后端架构 · 章节导览
前端·人工智能·架构
晓131315 分钟前
【Cocos Creator 3.x】篇——第四章 子系统
前端·javascript·游戏引擎
6v6-博客18 分钟前
C语言字符串中空格的表示方法
c语言·开发语言
geovindu20 分钟前
python: speech to text offline
开发语言·python·语音识别
li-xun22 分钟前
我的在线工具箱继续升级:新增 Token 计算器、AI 提示词生成器和开发者格式化工具
javascript·django·html5
ikoala24 分钟前
Codex 怎么买、怎么充值?先把这两套计费搞清楚
前端·javascript·后端