Blob

Для создания Blob не из объектов и данных blob, используйте конструктор Blob() . Чтобы создать blob из подмножества данных из другого blob, используйте метод slice(). Чтобы получить объект Blob для файла на файловой системе пользователя, смотрите документацию на File.

API, принимающие объекты Blob, также перечислены в документации на File.

Blob(blobParts[, options])

Возвращает создаваемый объект Blob, который содержит соединение всех данных в массиве, переданном в конструктор.

Blob.isClosed Только для чтения Экспериментальная возможность

Логическое значение, показывающее, вызывался ли метод Blob.close() у blob. Закрытый blob не может быть прочитан.

Blob.size Только для чтения

Размер данных, содержащихся в объекте Blob, в байтах.

Blob.type Только для чтения

Строка с MIME-типом данных, содержащихся в Blob. Если тип неизвестен, строка пуста.

Blob.close() Экспериментальная возможность

Закрывает Blob объект, по возможности освобождая занятые им ресурсы.

Blob.slice([start[, end[, contentType]]])

Возвращает новый Blob объект, содержащий данные в указанном диапазоне байтов исходного Blob.

Blob.stream()

Возвращает ReadableStream, который может использоваться для чтения содержимого Blob.

Blob.text()

Возвращает promise, который исполняется с USVString, содержащей всё содержимое Blob, интерпретируемое как текст UTF-8.

Конструктор Blob() constructor может создавать объекты blob из других объектов. Например, чтобы сконструировать blob из строки JSON:

const obj = { hello: "world" };
const blob = new Blob([JSON.stringify(obj, null, 2)], {
  type: "application/json",
});

var builder = new BlobBuilder();
var fileParts = ['<a id="a"><b id="b">hey!</b></a>'];
builder.append(fileParts[0]);
var myBlob = builder.getBlob("text/xml");

Следующий код создаёт типизированный массив JavaScript и создаёт новый Blob, содержащий данные типизированного массива. Затем вызывается URL.createObjectURL() для преобразования blob в URL.

HTML

<p>
  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.
</p>

JavaScript

Основной частью этого кода для примера является функция typedArrayToURL(), которая создаёт Blob из переданного типизированного массива и возвращает объект URL для него. Преобразовав данные в URL объекта, их можно использовать несколькими способами, в том числе, в качестве значения атрибута src элементов <img> (конечно, при условии, что данные содержат изображение).

function typedArrayToURL(typedArray, mimeType) {
  return URL.createObjectURL(new Blob([typedArray.buffer], { type: mimeType }));
}

const bytes = new Uint8Array(59);

for (let i = 0; i < 59; i++) {
  bytes[i] = 32 + i;
}

const url = typedArrayToURL(bytes, "text/plain");

const link = document.createElement("a");
link.href = url;
link.innerText = "Open the array URL";

document.body.appendChild(link);

Один из способов прочесть содержимое Blob – это использовать FileReader. Следующий код читает содержимое Blob как типизированный массив.

var reader = new FileReader();
reader.addEventListener("loadend", function () {
  // reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);

Другой способ прочитать содержимое из Blob – это использовать Response. Следующий код читает содержимое Blob как текст:

const text = await new Response(blob).text();

Или можно использовать Blob.text():

const text = await blob.text();

Используя другие методы FileReader, возможно прочесть содержимое объекта Blob как строку или как URL.

• BlobBuilder
• FileReader
• File
• URL.createObjectURL
• Components.utils.importGlobalProperties
• Использование файлов в веб-приложениях