前端将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)
}
相关推荐
charlie1145141918 分钟前
Cinux: 为大内核铺路
开发语言·c++·操作系统·现代c++
2501_9142459310 分钟前
C语言设计模式详解:从理论到实践的完整指南
c语言·开发语言·设计模式
Hazenix41 分钟前
Go 指南:一篇文章速通 Golang
开发语言·后端·golang
灯澜忆梦44 分钟前
GO_复合类型---指针
开发语言·后端·golang
Ulyanov1 小时前
雷达导引头Python仿真框架:GPU加速、6-DOF模型与半实物仿真接口
开发语言·python·雷达信号处理·雷达导引头
IT_陈寒1 小时前
SpringBoot自动装配坑了我一天,原来问题出在这
前端·人工智能·后端
索西引擎2 小时前
【React】key 属性:协调算法中的元素标识机制与最佳实践
前端·javascript·react.js
名字还没想好☜2 小时前
Go slice 的 append 陷阱:共享底层数组导致的数据串改
开发语言·后端·golang·go·slice
bitbrowser2 小时前
Claude 账号频繁被封?转向国内可直接使用的 AI 工具
开发语言·php
只会cv的前端攻城狮2 小时前
动态组件架构设计:从配置到事件驱动全链路解析
前端·vue.js