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

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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