Создание и загрузка текстового файла из строки в JavaScript: Blob/createObjectURL vs. encodeURIComponent

Поскольку я искал способ создать и загрузить текстовый файл с веб-сайта с помощью JavaScript, я нашел множество решений, но обычно использую либо Blob/createObjectURL или иным образом encodeURIComponent, причем первый из того, что я видел, более популярен. Ниже я показываю два примера: обратите внимание, что только одна-две строки в начале различаются в двух функциях (что я отметил в комментариях).

Blob/createObjectURL:

function dl_as_file_Blob(filename_to_dl, data_to_dl) {
    let blobx = new Blob([data_to_dl], { type: 'text/plain' }); // ! Blob
    let elemx = window.document.createElement('a');
    elemx.href = window.URL.createObjectURL(blobx); // ! createObjectURL
    elemx.download = filename_to_dl;
    elemx.style.display = 'none';
    document.body.appendChild(elemx);
    elemx.click();
    document.body.removeChild(elemx);
}

encodeURIComponent:

function dl_as_file_URI(filename_to_dl, data_to_dl) {
    let elemx = document.createElement('a');
    elemx.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(data_to_dl); // ! encodeURIComponent
    elemx.download = filename_to_dl;
    elemx.style.display = 'none';
    document.body.appendChild(elemx);
    elemx.click();
    document.body.removeChild(elemx);
}

Что я хотел бы знать, так это то, есть ли причина предпочесть одно другому. Пока я смог найти два небольших отличия. Первый, encodeURIComponent более широко поддерживается браузерами, чем createObjectURL. Во-вторых, Blobпохоже, не поддерживает кодировку. Исходя из этого, я бы выбралencodeURIComponent решение, но мне интересно, есть ли причина, по которой я вижу Blob/createObjectURL раствор чаще.

РЕДАКТИРОВАТЬ: вопрос, приведенный выше, является довольно общим, поэтому позвольте мне немного сузить мой конкретный вариант использования: я хочу разрешить пользователям загружать простой (utf-8), относительно небольшой (максимум 100-200 кБ) текст (результаты заполненного теста самооценки). Здесь нет действительно конфиденциальных данных, и файл нужен только для этой цели на стороне клиента. Тем не менее, я также приветствую более общие ответы, поскольку мне любопытны различия.

Источник

1 ответ

Решение

Интересно, есть ли причина, по которой я чаще вижу решение Blob/createObjectURL.

ИМХО есть несколько возможных причин:

TL;DR

  1. Спектакль

  2. Безопасность

  3. Доступ к API

  4. Это объект

  5. Выглядит круче

1. Производительность

  • У вас есть полный контроль над содержанием.

  • Вы можете хранить и получать доступ к очень большому количеству data: очень быстро (асинхронный, рабочие потоки) в / из Интернета, локальной файловой системы, локальных баз данных, а также других окон и рабочих.

  • Вы можете эффективно хранить объекты.

  • Доступ к контенту можно получить как текст, как типизированные массивы или как URL-адреса.

  • Вы можете разделить сохраненное data: для лучших результатов производительности (выигрыши похожи на массивы статической длины по сравнению с динамическими).

  • Blobs можно хранить в памяти или на дисках.

  • Blobs можно читать и записывать в / из Интернета, локальный.

  • Вывоз мусора.

Наиболее важно то, что клиентский объект JavaScript File является подтипом Blob, Файл - это просто Blob из data:с именем и датой изменения. Вы можете получить объекты File из<input type="file"> элементы и из API перетаскивания.

2. Безопасность

  • У вас есть полный контроль над содержанием. (по крайней мере на данный момент)

  • CORS: Blob того же происхождения, в то время как data: должно быть указано в правилах cors, кстати data: можно использовать для злых дел.

  • Вы можете творить гораздо больше зла с data:, но это не должно публиковаться / обсуждаться здесь.

3. Доступ через API

Как только у вас будет Blob, с ним можно делать разные вещи, многие из которых симметричны перечисленным выше:

  • Вы можете отправить Blob в другое окно или рабочий поток с помощью postMessage().

  • Вы можете хранить Blob в клиентской базе данных.

  • Вы можете загрузить Blob на сервер, передав его send()метод объекта XMLHttpRequest. (помните, что объект File - это просто специализированный видBlob).

  • Вы можете использовать createObjectURL() функция для получения специального blob:// URL-адрес, который ссылается на содержимое Blob-объекта, а затем использовать этот URL-адрес с DOM или с CSS.

  • Вы можете использовать объект FileReader для асинхронного (или синхронного, в рабочем потоке) извлечения содержимого Blob в строку или ArrayBuffer.

  • Вы можете использовать API файловой системы и объект FileWriter, чтобы написать Blob в локальный файл.

4. Это объект

  • Я думаю, мне не нужно вступать в эту дискуссию: D

5. Выглядит круче

  • Короткая Blob URL выглядит намного лучше, чем, например, строка размером 4096 КБ.

  • Вы можете делать гораздо больше крутых вещей с Blob.

источники:

Источник
Другие вопросы по тегам