前端将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)
}
相关推荐
醉酒的李白、16 小时前
Vue3 组件通信本质:Props 下发,Emits 回传
前端·javascript·vue.js
xiaohe0716 小时前
超详细 Python 爬虫指南
开发语言·爬虫·python
anOnion16 小时前
构建无障碍组件之Window Splitter Pattern
前端·html·交互设计
嗑嗑嗑瓜子的猫16 小时前
Java!它值得!
java·开发语言
NotFound48616 小时前
实战分享Python爬虫,如何实现高效解析 Web of Science 文献数据并导出 CSV
前端·爬虫·python
xiaoshuaishuai817 小时前
C# GPU算力与管理
开发语言·windows·c#
徐小夕17 小时前
PDF无限制预览!Jit-Viewer V1.5.0开源文档预览神器正式发布
前端·vue.js·github
lsx20240617 小时前
SVN 创建版本库
开发语言
xiaotao13117 小时前
01-编程基础与数学基石:Python错误与异常处理
开发语言·人工智能·python
WangJunXiang617 小时前
Haproxy搭建Web群集
前端