JavaScript实现下载base64数据并兼容低版本

 更新时间:2024年12月26日 08:48:28   作者: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数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现基于正则表达式的轻量提示插件

    js实现基于正则表达式的轻量提示插件

    这篇文章主要介绍了基于正则表达式的轻量提示插件,兼容性强却文件轻巧的文本框检测插件,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • 15款最好的Bootstrap在线编辑器

    15款最好的Bootstrap在线编辑器

    这篇文章主要为大家详细介绍了15款最好的Bootstrap在线编辑器,15款在线编辑工具希望帮助大家更好的进行开发,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • js 动态给元素添加、移除事件的实现方法

    js 动态给元素添加、移除事件的实现方法

    下面小编就为大家带来一篇js 动态给元素添加、移除事件的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • node.js使用nodemailer发送邮件实例

    node.js使用nodemailer发送邮件实例

    这篇文章主要介绍了node.js使用nodemailer发送邮件的方法,例子中使用的是QQ邮箱,你也可以修改成其它的邮箱如163、gmail等,需要的朋友可以参考下
    2014-03-03
  • 关于javascript event flow 的一个bug详解

    关于javascript event flow 的一个bug详解

    描述了firefox,safari 有一个bug和DOM 3 规范不一致:在event.currentTarget等于event.target的时候(即event flow处于target phase时),会调用添加到currentTarget上的useCapture为true的listener
    2013-09-09
  • js实现自动轮换选项卡

    js实现自动轮换选项卡

    这篇文章主要为大家详细介绍了js实现自动轮换选项卡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • IE6/7/8中Option元素未设value时Select将获取空字符串

    IE6/7/8中Option元素未设value时Select将获取空字符串

    可以看到当忘记写option的value时这些现代浏览器都会尽量返回正确的(客户端程序员想要的)结果value,其容错性比IE6/7/8做的更好。
    2011-04-04
  • js判断两个数组是否存在相同元素的四种方法

    js判断两个数组是否存在相同元素的四种方法

    这篇文章主要给大家介绍了关于js判断两个数组是否存在相同元素的四种方法,js中是不能直接用==或者===来计算两个数组是否相等的,那么就需要对数组的值进行比较,需要的朋友可以参考下
    2023-07-07
  • JavaScript必看的10道面试题总结(推荐)

    JavaScript必看的10道面试题总结(推荐)

    JavaScript 已经成为全栈开发技能的基石,在全栈开发面试中都会不可避免地涉及到与 JavaScript 有关的问题。这篇文章主要给大家介绍了关于JavaScript必看的10道面试题,需要的朋友可以参考下
    2021-05-05
  • javascript 深拷贝

    javascript 深拷贝

    突然问起我以前的函数,我也会愣一下,心想,真烂!我总是喜欢把最好的东西分享给大家的,以前的大家忘掉吧。
    2010-03-03

最新评论