【譯】什麼是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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。