前端将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)
}
相关推荐
quantdash_cc几秒前
如何给自己的量化策略增加独立数据层?从数据获取到策略解耦的 Python 实践
开发语言·python·数据分析·量化交易·股票数据·quantdash
NeoGressAI外贸数字化1 分钟前
外贸独立站3类页面合格度,怎么用脚本一次跑完
开发语言·python
其实防守也摸鱼6 分钟前
Codex 下载与本地部署实战指南
linux·服务器·前端·数据库·算法·ai
X北辰北13 分钟前
C++ 进阶第二阶段总结|STL容器全家桶、迭代器失效、STL算法、序列化入门(工程必备)
开发语言·c++·算法
苏渡苇19 分钟前
从零搭建 Vue 3 工程化项目:Vite + TypeScript + Pinia + Element Plus 实战
前端·vue.js·typescript
keyipatience22 分钟前
CSS学习(2)|元素显示模式、盒模型、Flex 布局
javascript·css·html·css3
CallFay云起未来23 分钟前
2026年AI客服能不能减少人工回复?从知识检索到人机协同的技术实现
java·大数据·前端·人工智能·架构·文心一言
IT_陈寒26 分钟前
一文搞懂SpringBoot的核心概念
前端·人工智能·后端
伯恩bourne32 分钟前
对比 @Configuration(Full) vs @Component(Lite)
java·开发语言
软件开发技术深度爱好者32 分钟前
ndexTTS-2和 CosyVoice之TTS(Text-to-Speech)使用python示例
开发语言·python