JavaScript | Как сохранить строку (данные) в файл на клиенте (браузере)?

Задача примитивно простая — нужно сохранить строку из браузера в какой-нибудь файл на компьютере или ноутбуке. Строка представляет собой полезные данные.

Пусть у нас будет строка, которую мы создадим на вкладке Console в инструментах разработчика браузера:

let stroka = "BlaBla Bla HHHmm"

Мы хотим сделать так, чтобы наш браузер загрузил файл на компьютер с этой строкой внутри.

Не важно каким образом мы получаем строки, главное что эта строка хранится в какой-то переменной и мы хотим сохранить содержимое этой переменной.

Может пользователь что-то печатает в Input и сохраняет, может текст генерируется автоматически без пользовательской помощи. Не важно. Главное — это сохранить данные в файл на клиентской стороне без привлечения сервера.

 

Как это сделать?

Существует несколько способов реализации задуманного.

 

Видео на 30 минут с пояснениями клиентского сохранения строки

 

Способ № 1 — Использование конструкторов Blob и URL

Логика такая. Сначала создаём новый большой двоичный объект — Blob. По сути это файл.

let blob = new Blob([stroka], {type: "text/plain"})

Конструктор Blob() принимает 2 параметра — СТРОКУ и её ТИП.

СТРОКА помещается в квадратные скобки и становится первым элементом массива, а ТИП помещается в фигурные скобки. Строкой у нас является переменная stroka, а объект с типом является {type: «text/plain»}

 

Затем создаём новый объект ссылки <a> (HTML-элемент) при помощи объектной модели документа DOM и метода createElement():

let link = document.createElement("a")

Сейчас эта ссылка хранится в переменной link и её не видно в документе. О её существовании знает только консоль браузера и оперативная память компьютера пользователя. Эта ссылка не содержит никаких атрибутов. Сейчас она выглядит так:

<a></a>

Теперь нам нужно немного оживить наш элемент ссылки. Сперва добавим атрибут href для элемента <a>. В качестве значения атрибута у нас будет выступать адрес URL.createObjectURL(blob)

link.setAttribute("href", URL.createObjectURL(blob))

Пример адреса, который может быть в href. Запущен во вкладке «Экспресс-панели» браузера Opera.

URL.createObjectURL(blob)
"blob:chrome://startpage/388da889-5981-4b67-8966-567b109b8612"

Мы видим, что ссылка будет использовать URI-схему «blob:»

Теперь нам нужно добавить ещё один атрибут для нашей ссылки. Это атрибут — download. Значением атрибута будет название файла для скачивания.

link.setAttribute("download", "my-text.txt")

Быстренько глянем на объект ссылки перед финальным действием.

 

Мы видим, что ссылка готова к нажатию на неё мышкой. Но мы не будем выводить эту ссылку в документ и не будем кликать на неё мышкой физически.

Вместо этого мы скажем JavaScript самому нажать на «невидимую» ссылку. Мы выполним событие клика за пользователя. Просто введём с консоль браузера:

link.click()

Смотрим что в файле на ПК:

Мы скачали файл с данными, которые получили на клиенте (в браузере)

 

Весь код без комментариев — Запусти в консоли браузера, протестируй!

let stroka = "BlaBla Bla HHHmm";
let blob = new Blob([stroka], {type: "text/plain"});
let link = document.createElement("a");
link.setAttribute("href", URL.createObjectURL(blob));
link.setAttribute("download", "my-text.txt");
link.click();

 

Функция сохранения строки (данных) в файл на ПК из браузера

function saveToPC(str){
   let blob = new Blob([str], {type: "text/plain"});
   let link = document.createElement("a");
   link.setAttribute("href", URL.createObjectURL(blob));
   link.setAttribute("download", Date.now()+"");
   link.click();
}

 

Информационные ссылки

Стандарт URL — WHATWG — https://url.spec.whatwg.org

Стандарт File API — w3.org — «Creating and Revoking a blob URL» — https://www.w3.org/TR/FileAPI/#creating-revoking

Стандарт File API — w3.org — createObjectURL(obj) — https://www.w3.org/TR/FileAPI/#dfn-createObjectURL

Перевод стандарта File API — https://efim360.ru/file-api/

Стандарт HTML — WHATWG — https://html.spec.whatwg.org/multipage/

Стандарт Media Types — IANA — https://www.iana.org/assignments/media-types/media-types.xhtml