前端将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)
}
相关推荐
梦曦i8 分钟前
@meng-xi/create-uni-app vs unibest:轻量脚手架与重型框架的定位之争
前端·uni-app
平头哥技术团队16 分钟前
Day 10 | 工欲善其事:VS Code 配置与项目归档
android·开发语言·前端·javascript·html·交互
乌萨奇也要立志学C++16 分钟前
【洛谷】kmp算法
开发语言·算法
传奇开心果编程31 分钟前
【Rust入门知识点学与练】第4课:条件判断 if / else
开发语言·学习·rust
乌恩大侠42 分钟前
GH200 新增 NVMe SSD 分区、格式化与挂载完整流程
运维·服务器·前端
m0_380743871 小时前
给 Claude API 调用补上超时重试和错误分类
开发语言·人工智能·php
yume_sibai1 小时前
Element Plus 数据展示组件完全指南(15个核心组件)
前端·javascript·vue.js
Draw Stars1 小时前
Git BASH安装教程
开发语言·git·bash
vortex51 小时前
一文讲透 Zsh 与 Bash 的区别
开发语言·bash
千谦阙听1 小时前
C++类和对象(中):默认成员函数、构造与析构、拷贝构造、运算符重载
开发语言·c++·学习