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

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

Пусть у нас будет строка:

var stroka = "BlaBla Bla HHHmm"

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

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

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

 

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

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

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

Конструктор Blob() принимает 2 параметра — строку и её тип. Строка помещается в квадратные скобки, а тип помещается в фигурные скобки. Строкой у нас является переменная stroka, а объект с типом является {type: «text/plain»}

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

var link = document.createElement("a")

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

<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:»

blob, ссылка и её href - JavaScript
blob, ссылка и её href — JavaScript

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

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

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

Готовая ссылка для клика - JavaScript
Готовая ссылка для клика — JavaScript

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

link.click()
Вызвали событие клика - Файл скачался - JavaScript
Вызвали событие клика — Файл скачался — JavaScript

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

Файл успешно создался и скачался - JavaScript
Файл успешно создался и скачался — JavaScript

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

 

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

var stroka = "BlaBla Bla HHHmm";
var blob = new Blob([stroka], {type: "text/plain"});
var link = document.createElement("a");
link.setAttribute("href", URL.createObjectURL(blob));
link.setAttribute("download", "my-text.txt");
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 APIhttps://efim360.ru/file-api/

Поделись записью