前端将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)
}
相关推荐
智商不够_熬夜来凑7 分钟前
【Picker】单选多选
前端·javascript·vue.js
彦为君36 分钟前
Java文件处理效率库Commons-IO(速览)
java·开发语言·mfc
米饭不加菜44 分钟前
Typora 原生流程图语法完全指南(Flowchart.js)
前端·javascript·流程图
scan7241 小时前
langgraphy条件边
前端·javascript·html
sycmancia1 小时前
Qt——文本打印与光标定位
开发语言·qt
故事和你911 小时前
洛谷-【动态规划1】动态规划的引入2
开发语言·数据结构·c++·算法·动态规划·图论
冰小忆2 小时前
类变量在继承场景下的初始化规则是怎样的?
java·前端·数据库
用户938515635072 小时前
《JS 对象知识地图:10 个小节,从字面量到原型链全覆盖》
javascript
YAwu112 小时前
JavaScript this 底层机制剖析
前端·javascript
AI人工智能+电脑小能手2 小时前
【大白话说Java面试题 第71题】【Mysql篇】第1题:索引是什么?
java·开发语言·b树·mysql·面试