前端将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)
}
相关推荐
陆枫Larry几秒前
页面接口换图后不刷新,刷新页面后才看得到新图
前端
糯米导航2 分钟前
Rust + ONNX Runtime 构建生产级 AI 推理服务:从零到压测
开发语言·人工智能·rust
0x867 分钟前
# Flutter 实时语音识别工程实践:从音频采集到流式 ASR 的完整链路
前端
阿pin14 分钟前
Java随笔-ConcurrentHashMap
java·开发语言·哈希算法
Patrick_Wilson19 分钟前
从一次 Safari 白屏,聊聊 CDN 外置 React 的坑与前端监控盲区
前端·react.js·cdn
秋田君21 分钟前
QT_QT布局详解
开发语言·数据库·qt
ximen502_25 分钟前
Python 语言知识总结
开发语言·python
m0_7381207232 分钟前
PHP代码审计基础——超全局变量(三)
开发语言·安全·网络安全·php
烟锁池塘柳039 分钟前
【C/C++】解决C++控制台输出中文乱码问题
c语言·开发语言·c++
lichenyang4531 小时前
从 Demo 到本地 HAR 包:把 HarmonyOS JSBridge 运行时做成可复用库
前端