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

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

0 голосов
/ 04 мая 2020

Поскольку я искал способ создания и загрузки текстового файла с веб-сайта с 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 чаще.

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

1 Ответ

1 голос
/ 11 мая 2020

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

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

TL; DR

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

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

  3. Доступ к API

  4. Это объект

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

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

  • Вы имеете полный контроль над контентом.

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

  • Вы можете хранить Объекты в удобном для вас виде.

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

  • Вы можете разделить сохраненные значения data: для улучшения результатов производительности ( усиления подобны stati c длина массивов против динамиков c единицы.

  • Blob с, которые можно хранить в памяти или на дисках.

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

  • Сборка мусора.

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

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

  • Вы полностью контролируете содержимое. (по крайней мере, на данный момент)

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

  • С помощью 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.

источники:

...