前端将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)
}
相关推荐
甜味弥漫2 分钟前
React Router:从单页应用到前端路由
javascript·node.js
柒和远方5 分钟前
Worker Readiness:为什么 `/health` 不能证明后台任务能跑
前端·后端·架构
hai3152475435 分钟前
九章编译法:DEEPSEEK V3.2汇编编译实例
java·开发语言
lkshop5 分钟前
Next.js 网站 SEO 优化:从 SSR、Sitemap 到结构化数据
开发语言·javascript·ecmascript
吃糖的小孩6 分钟前
Web Owner Console 还没写前端,我先给它设计 read model
前端
析数塔7 分钟前
2026前端框架深度解析:React Compiler、Angular Zoneless、Vue 3.5重写游戏规则
前端·vue.js·react.js
嘟嘟07178 分钟前
Node.js spawn 实现迷你 Cursor 自动化终端|子进程完整解析
前端·后端·面试
程序员Agions9 分钟前
ES2026,早该这样了
前端·javascript
ONE_SIX_MIX10 分钟前
lightweight-charts-onesixth v2.8.1 → v3.1.1 更新总览
java·前端·python
恋猫de小郭10 分钟前
Flutter material/cupertino 解耦最新进展,已经在做新样式了
android·前端·flutter