前端将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)
}
相关推荐
IT_陈寒4 小时前
Java中equals方法比了个寂寞?原来这才是正确的重写姿势
前端·人工智能·后端
默_笙4 小时前
🚓 分诊台与拆题术:让 RAG 学会判断和规划
前端·javascript
CopyCode4 小时前
用 AI 迁项目有多爽?我把 Webpack 迁 Vite 的全过程记下来了
前端·架构
去伪存真4 小时前
Electron 自动化发布指南:GitHub Actions 跨平台打包全纪录
前端·electron
计算机魔术师4 小时前
OpenAI智能体失控闯进美国政府网站,53张用户图片外泄背后
前端
颜进强4 小时前
14 · NestJS ExecutionContext 执行上下文:守卫、拦截器、过滤器拿到的"同一个 context",为什么能力不一样?
前端·后端·ai编程
程序员Flycan4 小时前
🚀 跨域终结者:前端代理服务器(Proxy)原理解析与配置总结
前端
怕浪猫4 小时前
顶级模型一句话,AI 写出了能玩的 QQ飞车
前端·面试·github
huakoh4 小时前
MCP 报错分不清?先看响应里是 result 还是 error
前端
呃呃呃呃ex4 小时前
10. 现代前端工程化:ES6 React 项目实战与原理解析
前端·javascript