Blob

Использование 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

Конструктор 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");

Создание URL для содержимого типизированного массива

Следующий код создаёт типизированный массив 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);

Другой пример

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], { type: "application/octet-binary" }); // pass a useful mime type here
var url = URL.createObjectURL(blob);
// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.

Извлечение данных из Blob

Один из способов прочесть содержимое 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
• Использование файлов в веб-приложениях