前端将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)
}
相关推荐
xm_xm_xm_111 分钟前
Vue 3 项目开发常用操作详细汇总
前端·vue.js
计算机魔术师13 分钟前
我国日均词元调用量突破 500 万亿,中国大模型稳居全球第一梯队
前端
夜雨声烦丿15 分钟前
从需求到页面:日期计算器应用的 ArkTS 原生实现
开发语言·javascript·华为·harmonyos
码视野23 分钟前
基于 Spring Boot + Vue3 的【高校化学实验室安全准入考试与危化品配伍排查系统】设计与实现(含PRD/三端高保真源码/大屏)
前端·人工智能·spring boot·后端·安全·vue3
玄魂35 分钟前
VisActor 全新图可视化开源项目:VGraph
前端·数据可视化
程序员雪球36 分钟前
本地IDEA打断点debug容器
java·开发语言
老白干1 小时前
基于枚举 + 注解的 Java 数据脱敏实践(fastjson 序列化场景)
java·开发语言
半亩码田1 小时前
C#转Python第4.1篇:当 try-catch 遇上 try-except:异常处理的大不同
开发语言·python·c#
数据知道1 小时前
Java 安全审计实战:SSRF、反序列化、SpEL 注入
java·开发语言·安全·网络安全
陈年老古董1 小时前
矿物分类数据处理:缺失值填充方法详解
开发语言·python·机器学习·项目