前端将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)
}
相关推荐
芳草萋萋鹦鹉洲哦7 小时前
【Windows】tauri+rust运行打包工具链安装
开发语言·windows·rust
权泽谦7 小时前
R Shiny 交互式网页实战:从零到上线可视化应用
开发语言·信息可视化·r语言
wuk9987 小时前
实现ROS系统的Websocket传输,向Web应用推送sensor_msgs::Image数据
前端·websocket·网络协议
hweiyu007 小时前
Go Fiber 简介
开发语言·后端·golang
合作小小程序员小小店9 小时前
web网页开发,在线%考试管理%系统,基于Idea,vscode,html,css,vue,java,maven,springboot,mysql
java·前端·系统架构·vue·intellij-idea·springboot
天天进步201510 小时前
CSS Grid与Flexbox:2025年响应式布局终极指南
前端·css
ᐇ95910 小时前
Java LinkedList集合全面解析:双向链表的艺术与实战
java·开发语言·链表
码银10 小时前
【数据结构】顺序表
java·开发语言·数据结构
Boop_wu10 小时前
[Java EE] 计算机基础
java·服务器·前端
Novlan111 小时前
TDesign UniApp 组件库来了
前端