JavaScript Blob

Blob是表示未处理数据的不可变对象。该文件是源自文件系统数据的Blob。Blob允许我们在客户端上创建类似文件的对象，我们可以将其传输给 APIs ，而这些APIs期望 URLs ，而不需要服务器提供文件。在本文中，我们将讨论带有一些示例的JavaScript Blob。

JavaScript Blob是什么

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

Blob可以由Web浏览器存储在内存或磁盘上，并且它们可以代表太大以至于无法适应主存储器的真正大量数据，除非首先使用 slice() 方法将其分成较小的部分。

创建Blob的语法：

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

new Blob("blobParts, options");

在这个语法中，

Blobparts: 它是一个由Blob、BufferSource和字符串值组成的数组。
Options: 它是一个可选的对象。
Type: 它是Blob类型，通常是类似于image.png的MIME类型。

示例

让我们来看一个示例，了解如何在程序中创建一个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(["Javatpoint"], 
{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>

输出: 执行此代码后，我们将在下面的截图中看到如下输出。

JavaScript Blob

p元素，它的 id 属性设置为 “main”。

<p id = "main></p>

Blob 对象

Blob 对象用于表示一个不可变的 blob 对象，它代表原始数据。类似于文件，blob 对象具有大小和 MIME 类型属性。

示例

让我们来看一个示例，了解如何在 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

JavaScript Blob URL’s

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

示例

让我们拿一个示例来理解如何在程序中使用Blob URL。

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

输出： 执行这段代码后，我们将在下面的截图中得到如下输出。

JavaScript Blob

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

JavaScript Blob

Blob转换为base64

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

数据URL具有以下语法：

[<mediatype>][;base64],<data>

此类URL可在任何地方使用，就像 “常规” URL一样。

示例

让我们来看一个示例，了解如何在JavaScript Blob中使用Blob to Base64。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript Blob</title>
</head>
<body>
    <a download="javatpoint.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