前端将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)
}
相关推荐
xuankuxiaoyao9 分钟前
Vue.js实践-组件基础下
前端·javascript·vue.js
小白学大数据9 分钟前
JS 混淆加密下的 Python 爬虫解决方案
javascript·爬虫·python
一棵白菜32 分钟前
Claude Code + Amazon Bedrock 使用指南
前端
加号342 分钟前
【Qt】 应用程序发布:依赖库拷贝与部署指南
开发语言·qt
大家的林语冰1 小时前
前端周刊:axios 疑遭朝鲜黑客“钓鱼“;CSS 新函数上线;npm 上线深色主题;Oxlint 兼容表;ESLint 支持 Temporal......
前端·javascript·css
('-')1 小时前
八股复习2:Java Array list和Linked list
java·开发语言
小黄人软件1 小时前
C++读写编辑CSV文件示例源码 用于数据导入导出,比Excel好使
开发语言·c++·excel
郭涤生2 小时前
C++各个版本的性能和安全性总结
开发语言·c++
哀木2 小时前
一个简单的套壳方案,就能让你的 Agent 少做重复初始化
前端
问心无愧05132 小时前
ctf show web入门27
前端