前端将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 分钟前
存储器层级结构
java·服务器·前端
uoKent8 分钟前
c++中的extern关键字
开发语言·c++
牧杉-惊蛰12 分钟前
将数组对象根据自定义排列
java·开发语言·算法
君顾127 分钟前
家校托管互通:从需求分析到系统架构的落地实践
java·开发语言·托管
jimy11 小时前
c++隐式移动构造、强制拷贝省略、返回具名局部变量
开发语言·c++
v_for_van1 小时前
C语言__attribute__
服务器·c语言·开发语言·mcu·嵌入式·嵌入式实时数据库
单线程121381 小时前
从案例分析 Vue3 Tokenizer 源码
前端·javascript·vue.js
明月_清风1 小时前
🖥️ Electron 三进程 Host 实战:从架构设计到生产落地的完整指南
前端·electron·客户端
工业一体机老司机1 小时前
Python实现工业一体机Modbus-TCP通信-从协议解析到多设备轮询实战
开发语言·python·tcp/ip
GIS数据转换器1 小时前
智慧林草“一张图“平台
java·大数据·服务器·前端·javascript·数据库·人工智能