前端将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)
}
相关推荐
未来之窗软件服务12 小时前
幽冥大陆(二)RDIFSDK 接口文档:布草洗涤厂高效运营的技术桥梁C#—东方仙盟
开发语言·c#·rdif·仙盟创梦ide·东方仙盟
小冯记录编程12 小时前
C++指针陷阱:高效背后的致命危险
开发语言·c++·visual studio
1uther13 小时前
Unity核心概念⑨:Screen
开发语言·游戏·unity·c#·游戏引擎
Nan_Shu_61413 小时前
Web前端面试题(2)
前端
知识分享小能手13 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
C_Liu_13 小时前
C++:类和对象(下)
开发语言·c++
coderxiaohan13 小时前
【C++】类和对象1
java·开发语言·c++
阿幸软件杂货间14 小时前
Office转PDF转换器v1.0.py
开发语言·pdf·c#
蚂蚁RichLab前端团队14 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
扯淡的闲人14 小时前
多语言编码Agent解决方案(5)-IntelliJ插件实现
开发语言·python