前端将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)
}
相关推荐
开源盛世!!4 分钟前
4.20-4.22
java·服务器·开发语言
旷世奇才李先生10 分钟前
React18\+TypeScript实战: Hooks封装与企业级组件开发
前端·javascript·typescript
MmeD UCIZ10 分钟前
GO 快速升级Go版本
开发语言·redis·golang
午安~婉10 分钟前
Electron(续4)利用AI辅助完成配置功能
前端·javascript·electron·应用打包与发布
tERS ERTS23 分钟前
头歌答案--爬虫实战
java·前端·爬虫
Fate_I_C27 分钟前
Kotlin函数一
android·开发语言·kotlin
Eiceblue29 分钟前
C# 实现 XLS 与 XLSX 格式双向互转(无需依赖 Office)
开发语言·c#·visual studio
当时只道寻常30 分钟前
Vue3 集成 NProgress 进度条:从入门到精通
前端·vue.js
kyriewen31 分钟前
React性能优化:从“卡成狗”到“丝般顺滑”的5个秘诀
前端·react.js·性能优化