前端将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)
}
相关推荐
Wang's Blog1 分钟前
Go-Zero项目开发4: 用户服务搜索、详情与统一错误处理
开发语言·golang
我星期八休息17 分钟前
网络编程—应用层HTTP协议
linux·运维·开发语言·前端·网络·网络协议·http
梅雅达编程笔记23 分钟前
零基础学 Python 第14章 | 模块、包与第三方库
开发语言·python·django·numpy·pandas
Mr__Miss30 分钟前
Java泛型完全指南:从入门到精通
java·开发语言·python
赵庆明老师37 分钟前
Vben精讲:14-Vben远程加载语言包
开发语言·vben
不好听61339 分钟前
前端路由完全指南(下篇):懒加载、History 栈与工程化实践
前端·react.js
hehelm2 小时前
AI大模型接入SDK—通用模块设计
linux·开发语言·c++
触底反弹2 小时前
🔥 从零搭建 RAG 知识库:爬虫→分词→向量化→检索,一步都不能错
javascript·人工智能·面试
圣光SG3 小时前
Java Web入门基础知识笔记
java·前端·笔记
梅雅达编程笔记3 小时前
零基础学 Python 第15章 | 类与对象:面向对象编程入门
开发语言·python·django·numpy·pandas