前端将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)
}
相关推荐
Csvn19 分钟前
OpenSpec 详细使用教程
前端
方也_arkling26 分钟前
【Java-Day08】static / final / 枚举
java·开发语言
风吹夏回38 分钟前
Python 全局异常处理:从“满屏 try-except”到优雅兜底
开发语言·python
Chengbei111 小时前
一站式源码安全检测工具、云安全 / APP / 小程序源码敏感信息递归多层目录扫描AK、JWT、手机号、身份证等敏感信息
java·开发语言·安全·web安全·网络安全·系统安全·安全架构
llz_1121 小时前
web-第一次课后作业
java·开发语言·idea
小熊Coding1 小时前
Python爬取当当网二手图书项目实战!
开发语言·爬虫·python·beautifulsoup·requests·二手图书
之歆1 小时前
Day19_LESS 完全指南——从入门到工程实践
前端·css·less
秋91 小时前
Java项目运行5天左右自动宕机:系统性定位与解决方案
java·开发语言·python
xiaoshuaishuai81 小时前
C# 内存管理与资源泄漏
开发语言·c#
云水一下2 小时前
HTML5 从入门到精通:实战收官——从零搭建完整静态网站,综合运用所有知识
前端·html5