前端将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)
}
相关推荐
NetX行者7 分钟前
Rust 初体验:一个全栈工程师的编译器“毒打“笔记
开发语言·笔记·rust
wing9827 分钟前
人生第一个私活:不到 2 小时,到手 350 元
前端·后端·程序员
张张123y28 分钟前
后端第十二课:Agent 开发(让大模型从“会答“升级到“会做“)
前端·大模型·llm·agent·rag
OpsEye30 分钟前
模型能力波动怎么办?网关侧做模型质量监控与自动切换
javascript·ai编程
我就是不信1 小时前
Java8 lambda 表达式 forEach 如何提前终止?
开发语言·windows·python
Cx330❀1 小时前
深入浅出 Qt 绘图机制:从 QPainter 到四大图像类解析
开发语言·qt·ui·性能优化·图形渲染
A小码哥1 小时前
大模型成本怎么降,5 个动作先做前两个
java·前端·spring
信可维1 小时前
AI 读 Word 表格总读错?先查合并单元格和表头这 3 处
开发语言·人工智能·c#·word·软件工程
PHP是世界上最好的语言1 小时前
ComPDF预览本地正常,部署后白屏:检查资源、路径和许可
前端
kiros_wang1 小时前
项目分包方案:模块拆分、跨模块组件与方法引用规范
前端