Скачивание JSON-объекта как файла из браузера на JS

Быстрый ответ

const downloadJSON = (obj, name) => {
  const dataUri = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));
  const anchorElement = document.createElement('a');
  anchorElement.href = dataUri;
  anchorElement.download = `${name}.json`;
  document.body.appendChild(anchorElement);
  anchorElement.click();
  document.body.removeChild(anchorElement);
}

// Пример использования функции:
downloadJSON({ key: 'value' }, 'desiredFilename');

Функция downloadJSON служит для быстрого экспорта объекта JSON в файл, операция производится напрямую в браузере. Передайте в функцию данные в формате JSON и имя для создаваемого файла, и она выполнит всю необходимую работу.

Детальное объяснение: пошаговая инструкция

Пройдемся подробно по каждому шагу и разберемся, как и почему данный процесс функционирует.

Кодирование данных

Начните с подготовки вашего JSON-объекта. Используйте JSON.stringify и encodeURIComponent, чтобы безопасно конвертировать ваши данные в формат URI.

const dataUri = "data:text/json;charset=utf8," + encodeURIComponent(JSON.stringify(obj));

Таким образом, данные готовятся к загрузке.

Подробнее об этом расскажет наш спикер на видео

Создание ссылки

На следующем этапе создается виртуальная ссылка, которая в браузере представлена как файл для скачивания.

const anchorElement = document.createElement('a');
anchorElement.href = dataUri;
anchorElement.download = `${filename}.json`;

Выставление href в значение dataUri указывает на место, где хранятся данные. download, напротив, представляет собой имя создаваемого файла (filename).

Преодоление ограничений браузера

Чтобы инициировать загрузку в Firefox, мы добавляем созданную ссылку в body документа.

document.body.appendChild(anchorElement);

Поразительно, но браузеры можно "обмануть" таким простым способом.

Имитация клика и очистка

Заключительный этап: симулируем нажатие на созданную ссылку для инициирования скачивания, а затем убираем ссылку, чтобы не оставить следов в документе.

anchorElement.click();
document.body.removeChild(anchorElement);

В результате, всё происходит настолько быстро и незаметно для пользователя, что он не замечает процесса его вмешательства.

Для смельчаков: альтернативные подходы

Blob и URL.createObjectURL

Для работы с большими JSON-объектами удобно воспользоваться методами Blob и URL.createObjectURL.

const objectBlob = new Blob([JSON.stringify(obj)], {type : 'application/json'});
const url = URL.createObjectURL(objectBlob);
const anchorElement = document.createElement('a');
anchorElement.href = url;
anchorElement.download = `${name}.json`;

Это позволит избежать использования encodeURIComponent.

FileSaver.js

Для упрощения процесса можно использовать библиотеку FileSaver.js.

saveAs(new Blob([text], {type: "application/json;charset=utf-8"}), 'filename.json');

Этот инструмент сделает процесс сохранения файлов еще более простым.

Форматирование JSON

Чтобы сделать JSON более удобным для восприятия людьми, отформатируйте его следующим образом:

JSON.stringify(obj, null, 2);

Визуализация

С использованием подходящей визуализации можно упростить понимание процесса загрузки:

1. Кодирование JSON в формат URI.
2. Создание кликабельной ссылки.
3. Симуляция процесса скачивания.
4. Очистка после выполнения задачи.

Был проделан следующий путь: кодирование данных → создание ссылки → симуляция клика → очистка.

Полезные материалы

1. Blob (MDN Web Docs) – изучение API Blob для сохранения данных формата JSON.
2. URL.createObjectURL (MDN Web Docs) – знакомство с возможностью создания URL для ваших объектов.
3. Руководство для начинающих по использованию кеширования в веб-приложениях (web.dev) – все о кешировании в веб-разработке.
4. FileReader (MDN Web Docs) – подробнее о чтении содержимого Blob и других типов данных.
5. FileSaver.js на GitHub – упрощенное сохранение файлов в браузере.
6. Fetch (javascript.info) – примеры использования Fetch API для скачивания файлов.