JavaScript实现下载base64数据并兼容低版本
作者：Code_Geo
这篇文章主要为大家详细介绍了如何使用JavaScript实现下载base64数据并兼容低版本,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
详细步骤如下
1、解析 Base64 数据：
如果数据流中包含前缀 data:…;base64,，先分离 MIME 类型和 Base64 数据部分。
如果没有前缀，假设默认 MIME 类型（如 application/octet-stream）。
2、Base64 解码：
使用 atob 将 Base64 字符串解码为二进制字符串。
将二进制字符串转为 Uint8Array。
3、生成 Blob：
将二进制数据创建为 Blob 对象，指定类型（如 text/plain）。
4、触发下载：
使用 URL.createObjectURL 创建 Blob 对象的临时 URL。
动态创建 元素，设置其 href 属性为临时 URL，指定文件名，触发点击事件下载。
5、清理临时资源：
下载完成后，移除 元素并释放临时 URL。
实现代码如下:
function downloadBase64Data(base64Data, fileName) {
try {
// 检查 Base64 数据是否包含前缀（如 data:...;base64,）
let mimeType = '';
let base64String = '';
if (base64Data.includes(',')) {
const [metadata, data] = base64Data.split(',');
mimeType = metadata.match(/:(.*?);/)[1]; // 提取 MIME 类型
base64String = data; // 仅取 Base64 数据部分
} else {
// 如果没有前缀，默认为某种 MIME 类型，例如 application/octet-stream
mimeType = 'application/octet-stream';
base64String = base64Data;
}
// Base64 解码
const binaryString = atob(base64String); // 解码 Base64
const binaryData = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
binaryData[i] = binaryString.charCodeAt(i);
}
// 创建 Blob 对象
const blob = new Blob([binaryData], { type: mimeType });
// 使用 Blob 创建临时 URL
const url = URL.createObjectURL(blob);
// 创建 <a> 元素并触发下载
const a = document.createElement('a');
a.href = url;
a.download = fileName;
document.body.appendChild(a); // 必须将其添加到 DOM 中
a.click();
// 清理
document.body.removeChild(a);
URL.revokeObjectURL(url);
console.log('文件下载成功');
} catch (error) {
console.error('下载失败:', error.message);
}
}
// 示例用法
const base64Data = 'data:text/plain;base64,SGVsbG8sIFdvcmxkIQ=='; // 示例 Base64 数据
const fileName = 'example.txt';
downloadBase64Data(base64Data, fileName);
优势
无 API 依赖：适合直接处理纯 Base64 数据流。
兼容性高：支持现代浏览器（Chrome、Firefox、Edge）。
注意事项
文件名：确保 fileName 是用户友好的文件名，并包含扩展名。
性能问题：对于较大的 Base64 数据，内存占用会较高。
安全性：确保 Base64 数据可信，避免处理恶意输入。
到此这篇关于JavaScript实现下载base64数据并兼容低版本的文章就介绍到这了,更多相关JavaScript下载base64数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！