JavaScript Blob

17 Mar 2025 | 5 分钟阅读

Blob 是表示未处理数据的不可变对象。文件是 Blob 的派生，它来自文件系统的数据。Blob 使我们能够在客户端创建类文件对象，然后可以将这些对象传递给期望 URL 而不是需要服务器提供文件的 API。在本文中，我们将通过一些示例来讨论 JavaScript Blob。

什么是 JavaScript Blob？

Blob 对象就是一个字节集合，其中包含存储在文件中的数据。Blob 看起来像是对实际文件的引用，但实际上并非如此。Blob 与简单文件具有相同的大小和 MIME 类型。Blob 数据存储在用户的内存中，这取决于浏览器功能和 Blob 的大小。文件是 Blob 的派生，可以在使用文件的相同地方使用 Blob。Blob 对于存储二进制数据非常有用，因为可以轻松地将它们的內容读取为 ArrayBuffer。

Blob 可以由 Web 浏览器存储在内存或磁盘上，它们可以表示非常大的数据块，这些数据块太大而无法放入主内存，除非首先使用 slice () 方法将其分成更小的块。

创建 Blob 的语法

创建 JavaScript Blob 的语法可以定义为

在这个语法中，

Blobparts：这是一个 Blob、BufferSource 和字符串值的数组。
Options：这是一个可选对象。
Type：这是一个 Blob 类型，通常是 MIME 类型，如 image.png。

示例

让我们看一个示例，以了解如何在程序中创建 JavaScript Blob。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript Blob</title>
</head>
<body>
    <p id="main"></p>
    <script>
var abc = new Blob(["TpointTech"], 
{type : "text/plain"});
var def = new FileReader();
def.addEventListener("loadend", function(e) {
document.getElementById("main").innerHTML
     = e.srcElement.result;
});
def.readAsText(abc);
</script>
</body>
</html>

输出：执行此代码后，我们将在屏幕截图中看到如下所示的输出。

在此程序中，我们仅创建了一个 id 为 “main” 的简单 <p> 元素。

Blob 对象

Blob 对象用于表示一个不可变的 Blob 对象，该对象表示原始数据。Blob 像文件一样，具有大小和 mime-type 属性。

示例

让我们看一个示例，以了解如何在 JavaScript 中创建 Blob 对象。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Blob</title>
<style>
   body {
      font-family: "Tahoma", Verdana;
   }
   .result{
      font-size: 18px;
      font-weight: 500;
      color: red;
   }
</style>
</head>
<body>
<h1>Blob object in JavaScript</h1>
<div class="result"></div>
<button class="Btn">Click here</button>
<h3>Click on the button to make and show a JavaScript blob object</h3>
<script>
   let resEle = document.querySelector(".result");
   document.querySelector(".Btn").addEventListener("click", () => {
      let blob = new Blob(["JavaScrit blob is a sample blob"], { type: "text/plain" });
      resEle.innerHTML = "blob.type = " + blob.type + "<br>";
      resEle.innerHTML += "blob.size = " + blob.size;
   });
</script>
</body>
</html>

输出：执行此代码后，我们将在屏幕截图中看到如下所示的输出。

正如我们所见，有一个“点击此处”按钮。当我们点击“点击此处”按钮时，它会显示屏幕截图中所示的結果。

JavaScript Blob URL

我们有 Blob URL，它们引用 Blob，就像我们有文件 URL 引用本地文件系统中的实际文件一样。如果 Blob URL 类似于常规 URL，那么它们可以在常规 URL 可以使用的任何地方使用。JavaScript Blob 可以轻松地用作 <img> 标签和其他标签的 URL 来显示其内容。createObjectURL 对象可用于获取指向 Blob 的 Blob URL。

示例

让我们看一个示例，以了解如何在程序中使用 Blob URL。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript Blob</title>
</head>
<body>
    <a download="TpointTech.txt" href='#'
        id="link">Download file</a>
    <script>
        let abc = new Blob(["TpointTech"],
                { type: 'text/plain' });
        link.href = URL.createObjectURL(abc);
</script>
</body>
</html>

输出：执行此代码后，我们将在屏幕截图中看到如下所示的输出。

在这里，我们可以看到有一个链接。当我们点击链接时，将从该链接下载一个文本文件，如下面的屏幕截图所示。

Blob 到 base64

将 Blob 转换为 base64 编码字符串是 URL.createObjectURL 的一种替代方法。此编码通过将其加密为超安全的“可读”字符字符串（ASCII 码范围为 0 到 64）来保护二进制数据。更重要的是，此编码可用于“data-urls”。要将 Blob 转换为 base64，我们将使用内置的 FileReader 对象。

数据 URL 具有以下语法

这些 URL 可以在任何地方使用，就像“常规” URL 一样。

示例

让我们看一个示例，以了解如何在 JavaScript Blob 中使用 Blob 到 base64。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript Blob</title>
</head>
<body>
    <a download="TpointTech.txt" href='#'
    id="link">Download file</a>
    <script>
   let link = document.createElement('a');
link.download = 'hello.txt';
let blob = new Blob(['Hello, world!'], {type: 'text/plain'});
let reader = new FileReader();
reader.readAsDataURL(blob); 
reader.onload = function() {
  link.href = reader.result; // data url
  link.click();
};
    </script>
</body>
</html>

输出：执行此代码后，我们将在屏幕截图中看到如下所示的输出。当我们执行程序时，它会在运行时直接下载文件。

JavaScript Blob 的优缺点

JavaScript Blob 有一些优点和缺点。其中一些如下

JavaScript Blob 的优点

Blob 是在数据库中存储和引用大型二进制数据文件的便捷方法。
Blob 数据库备份包含所有数据。
使用 Blob 时，通过权限管理可以轻松设置访问权限。

JavaScript Blob 的缺点

由于所需的磁盘空间量以及访问时间，Blob 的效率低下。
并非所有数据库都支持 Blob。
由于 Blob 的文件大小较大，创建备份需要很长时间。

下一个主题检查 JavaScript 中的数组是否为空、null 或 undefined

JavaScript Blob

什么是 JavaScript Blob？

创建 Blob 的语法

示例

Blob 对象

示例

JavaScript Blob URL

示例

Blob 到 base64

示例

JavaScript Blob 的优缺点

JavaScript Blob 的优点

JavaScript Blob 的缺点

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript Blob

什么是 JavaScript Blob？

创建 Blob 的语法

示例

Blob 对象

示例

JavaScript Blob URL

示例

Blob 到 base64

示例

JavaScript Blob 的优缺点

JavaScript Blob 的优点

JavaScript Blob 的缺点

相关帖子

JavaScript 中的柯里化 (Currying)

使用 CSS 和 JS 的 GIF 播放器

Javascript regexp 前瞻

JavaScript 中的假值

JavaScript MutationObserver 函数