Скачивание 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);
Визуализация
С использованием подходящей визуализации можно упростить понимание процесса загрузки:
- Кодирование JSON в формат URI.
- Создание кликабельной ссылки.
- Симуляция процесса скачивания.
- Очистка после выполнения задачи.
Был проделан следующий путь: кодирование данных → создание ссылки → симуляция клика → очистка.
Полезные материалы
- Blob (MDN Web Docs) – изучение API Blob для сохранения данных формата JSON.
- URL.createObjectURL (MDN Web Docs) – знакомство с возможностью создания URL для ваших объектов.
- Руководство для начинающих по использованию кеширования в веб-приложениях (web.dev) – все о кешировании в веб-разработке.
- FileReader (MDN Web Docs) – подробнее о чтении содержимого Blob и других типов данных.
- FileSaver.js на GitHub – упрощенное сохранение файлов в браузере.
- Fetch (javascript.info) – примеры использования Fetch API для скачивания файлов.