前端将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)
}
相关推荐
陆枫Larry7 分钟前
一次登录问题排查:接口没错,错的是旧业务逻辑
前端
小小小小宇13 分钟前
大模型打分与采样原理,以及 Pi Agent 核心原理
前端
XZ-07000113 分钟前
week2-1-可视化
开发语言·python
Java后端的Ai之路21 分钟前
14、Python - 责任链模式
服务器·开发语言·人工智能·python·责任链模式
吴声子夜歌35 分钟前
Java——基本类型
java·开发语言
一位正在转型AI全栈的前端工程师38 分钟前
AI 全栈学习之旅 -Week 5:RAG 知识库问答系统:从零到生产级部署的全栈实践总结
前端·python
「QT(C++)开发工程师」1 小时前
C++11 std::unique_ptr — 独占所有权的智能指针
c语言·开发语言·c++·qt
光影少年1 小时前
react navite 安卓iOS 打包、签名、环境区分
前端·react native·react.js
coderCN1 小时前
Nodejs 第三十四章 数据库(表达式和函数、子查询和连表)
前端·node.js
不正经学生1 小时前
C语言动态内存管理(上):堆上的自由与责任
c语言·开发语言·c++·算法·面试