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

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

У нас есть массив:

var massiv = ["efim360.ru", "помог", "мне", "решить", "задачу"]

Этот массив мы хотим сохранить в файл на компьютере при помощи клиента (браузера). То есть нам не нужно использовать серверную сторону для этого. По сути мы хотим сгенерировать массив на клиенте, и сохранить его в файл с каким-либо названием и каким-либо расширением.

Никакой сервер не создаёт для нас этот файл! Задача именно в этом - в автономности и независимости от сервера.

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

var massiv = ["efim360.ru", "помог", "мне", "решить", "задачу"];
var blob = new Blob([JSON.stringify(massiv)], {type: "text/javascript"});
var link = document.createElement("a");
link.setAttribute("href", URL.createObjectURL(blob));
link.setAttribute("download", "my-array.js");
link.click();

Как это работает?

Если коротко, то мы создаём большой двоичный объект с "данными" и "типом данных".

Данными у нас всегда будет строка, поэтому мы используем конструкцию JSON.stringify(massiv), чтобы конвертировать наш массив с квадратными скобками в строковое представление.

Типом данных мы выбираем mime-тип "text/javascript", чтобы сохранить в файл с расширением ".js".

Потом мы создаём "невидимый" объект ссылки. Потом мы назначаем этой ссылке атрибуты. Потом вызываем событие клика по ссылке. Файл с массивом скачивается на компьютер. Задача выполнена.

Дополнительную информацию можно почитать в публикации JavaScript | Как сохранить данные в файл на клиенте (браузере)?

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

Стандарт 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

Internet Assigned Numbers Authority (IANA) - Media Types - https://www.iana.org/assignments/media-types/media-types.xhtml

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

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

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