前端将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)
}
相关推荐
Dilettante2589 小时前
React Server Components 全链路解析:Next.js 构建产物、导航流程与 Payload 格式
前端·next.js
前端付豪9 小时前
Nest 项目小实践之注册登陆
前端·node.js·nestjs
用户9121917620619 小时前
日本股票K线图生成实战:基于API的完整对接方案
前端
牛奶9 小时前
JS随笔:ES6+特性与模块化实践
前端·javascript
牛奶9 小时前
JS随笔:基础语法与控制结构
前端·javascript
天蓝色的鱼鱼9 小时前
Node.js 中间层退潮:从“前端救星”到“成本噩梦”
前端·架构·node.js
货拉拉技术9 小时前
如何用 AI 做业务级 Code Review
前端·agent·前端工程化
李剑一9 小时前
前端圈子又出新东西了,大幅提升解析速度。尤雨溪推荐,但我不太推荐
前端
前端Hardy9 小时前
HTML&CSS&JS:基于定位的实时天气卡片
javascript·css·html
青屿ovo10 小时前
Vue前端页面版本检测解决方案
前端·vue.js