【译】什么是Blob？

时间 2020-06-29

标签什么 blob 繁體版

原文原文链接

原文地址： https://codeburst.io/javascri...
做者：Dornhothjavascript

若是你已经能让一个用户从你的网站上下载某些文件，那或许你已经遇到过 Blob 类型了。你可能已经在网上检查了一些例子并修改它们，但没有多想这个 Blob 是什么。只要它能工做...html

这种知识能够显示初级开发人员和高级开发人员之间的区别。又或者，做为一名初级开发人员，你会由于好奇和渴望学习而脱颖而出。即便你不是在为面试作准备，对 Blob 是什么有一个清晰而简单的理解，也能够帮助你理解下一次在压缩 PDF 文件时，中间遇到的复杂代码，因此咱们开始吧:java

用法

要下载一些简单的文本，你能够这样作：面试

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Blobs</title>
  <script src="index.js"></script>
</head>

<body>
  <button id="button">Link</button>
</body>

</html>

const download = (fileName, file) => {
  const element = document.createElement('a');
  element.href = file;
  element.download = fileName;
  element.target = '_blank'; 
  element.click();
  element.remove();
}

document.addEventListener('click', async event => {
  if (event.target.id === 'button') {
    const fileName = 'test.txt';
    download(fileName, 'data:text/json;charset=utf-8,File to download');
  }
});

另外一方面，对于更复杂的文件，这还不够。若是咱们想下载生成 PDF 文件，则必须这样作（这个示例使用 jsPDF）：ajax

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Blobs</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>
  <script src="index.js"></script>
</head>

<body>
  <button id="button">Link</button>
</body>

</html>

const download = (fileName, blob) => {
  const element = document.createElement('a');
  const url = window.URL.createObjectURL(blob);
  element.href = url;
  element.download = fileName;
  element.target = '_blank'; 
  element.click();
  element.remove();
}

document.addEventListener('click', async event => {
  if (event.target.id === 'button') {
    const doc = new jsPDF();
    const fileName = 'test.pdf';
    doc.text('Hello world!');
    const blob = new Blob([doc.output()]);
    download(fileName, blob);
  }
});

什么是Blob？

Blob 不是 JavaScript 特有的。最初，建立 Blob 是为了在数据库管理系统中使用。该类型建立于1970年代，用于存储音频、图像或视频等大文件，这些文件太大，没法存储在常规数据库字段中。所以这个术语其实是指“二进制大对象”。数据库

在 JavaScript 中，Blob 用于将文件表示为不可变的原始数据。在控制台中，咱们在前面的例子中建立的 Blob，以下所示:json

如你所见，Blob 有两个属性：大小（size）和类型（type）。大小是以字节为单位的数据大小。类型是一个包 MIME 类型的字符串。建立 Blob 时我没有给出任何类型，但我应该这样作：app

const blob = new Blob([doc.output()], { type: 'application/pdf' });

如今个人 Blob 也有一个类型：jsp

Blob中有什么？

JavaScript Blob 提供了一些方法来访问它们的内容。其中一个是 text 方法，它以文本（text）形式返回对 Blob 内容的 Promise 解析(技术上是 USVString)。async

document.addEventListener('click', async event => {
  if (event.target.id === 'button') {
    const doc = new jsPDF();
    doc.text('Hello world!');
    const blob = new Blob([doc.output()], { type: 'application/pdf' });
    const blobAsText = await blob.text();
    console.log(blobAsText);
  }
});

这给了咱们一个至关很差理解的内容：

%PDF-1.3
3 0 obj
<</Type /Page
/Parent 1 0 R
/Resources 2 0 R
/MediaBox [0 0 595.28 841.89]
/Contents 4 0 R
>>
endobj
4 0 obj
<</Length 67>>
stream
0.57 w
0 G
BT
/F1 16 Tf
18.4 TL
0 g
NaN NaN Td
(Hello world!) Tj
ET
endstream
endobj
1 0 obj
<</Type /Pages
/Kids [3 0 R ]
/Count 1
>>
endobj
5 0 obj
<</BaseFont/Helvetica/Type/Font
/Encoding/WinAnsiEncoding
/Subtype/Type1>>
endobj
6 0 obj
...

能作的事情并很少，但它给了你一个机会，让你了解文件内部长什么样子。

还有另外两种方法可让你访问 Blob 的内容:

arrayBuffer，将返回一个 Promise 解析到 ArrayBuffer
stream，将返回一个可读流（ReadableStream）

操做 Blob

你按期从 HTTP 请求接收文件。若是使用 fetch API，则须要使用 body 上的 blob 方法从响应中读取 blob:

document.addEventListener('click', async event => {
  if (event.target.id === 'button') {
    fetch('https://whatever/doc.pdf')
    .then(response => response.blob())
    .then(blob => {
      download('test.pdf', blob);
    });
  }
});

在前面的示例中，咱们使用库建立了一个 PDF 文件，并从中建立了一个 Blob。

你还能够从另外一个 Blob 建立一个 Blob。您只能对原始 Blob 进行切片（slice），也就是说只返回其字节的一部分。

document.addEventListener('click', async event => {
  if (event.target.id === 'button') {
    const blob = new Blob(['some text'], { type: 'application/pdf' });
    const slicedBlob = blob.slice(5, 9);
    const blobAsText = await blob.text();
    const slicedBlobAsText = await slicedBlob.text();

    console.log(`Original Blob: ${blobAsText}`);
    console.log(`Sliced Blob: ${slicedBlobAsText}`);
  }
});

这对于很是简单的 Blob 可能颇有用，可是对于更复杂的文件，这可能会损坏您的文件并使切片的 Blob 不可读。

我但愿你如今能理解 Blob 的用法。这是一种很是简单的数据类型，用于将文件表示为原始数据。若是您想了解更多细节，能够查看文档：

https://developer.mozilla.org/en-US/docs/Web/API/Blob