前端将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)
}
相关推荐
overmind22 分钟前
oeasy Python 115 列表弹栈用pop删除指定索引
开发语言·python
恋猫de小郭26 分钟前
你是不是觉得 R8 很讨厌,但 Android 为什么选择 R8 ?也许你对 R8 还不够了解
android·前端·flutter
PineappleCoder1 小时前
告别“幻影坦克”:手把手教你丝滑规避布局抖动,让页面渲染快如闪电!
前端·性能优化
Never_Satisfied1 小时前
在c#中,使用windows自带功能将文件夹打包为ZIP
开发语言·windows·c#
hnxaoli1 小时前
win10程序(十六)通达信参数清洗器
开发语言·python·小程序·股票·炒股
电饭叔1 小时前
文本为 “ok”、前景色为白色、背景色为红色,且点击后触发 processOK 回调函数的 tkinter 按钮
开发语言·python
武帝为此1 小时前
【Shell变量替换与测试】
前端·chrome
CappuccinoRose2 小时前
CSS 语法学习文档(十九)
前端·css·属性·flex·grid·学习资源·格式化上下文
雷电法拉珑2 小时前
财务数据批量采集
linux·前端·python