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:

let 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

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

 

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

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/

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

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