Генерация файла и скачивание его через JS

20 июня 2021, 17:50

Так как я практикуюсь в js и его возможностях, мне потребовалось найти способ сохранения данных в моем приложении.
Я узнал что браузер напрямую не может взаимодействовать с файловой системой и узнал что можно сгенерировать объект на скачивание файла. Проблема в том что я заранее не могу знать что сделает пользователь (то есть вариант с предварительно подготовленным файлом на скачивание не подходит) и поэтому мне нужно средствами js создать файл, записать в него данные и скачать. Не подскажете как это сделать?
Объекта формы у меня нет и файл предпочтительно сохранять в json.

Answer 1

Для скачивания файлов в браузере есть специальный механизм - атрибут download у тега a, вот как его можно задействовать напрямую из js :

let text = JSON.stringify({hello:'example'}); 
downloadAsFile(text); 
 
function downloadAsFile(data) { 
  let a = document.createElement("a"); 
  let file = new Blob([data], {type: 'application/json'}); 
  a.href = URL.createObjectURL(file); 
  a.download = "example.txt"; 
  a.click(); 
}

Вот в этом ответе пример как создать на странице zip архив и потом его скачать.

—-

Если Вашему приложению необходимо работать именно с файлами как с файлами, есть browserfs, который эмулирует модуль fs из nodejs в браузере.

Работает с большим количеством бэкэндов -

оперативная память
localstorage
indexeddb
fetch/xhr
dropbox
...

Всякие там emscrpiten и isomorphic-git используют этот модуль для обеспечения работы уже написанного под работу файловой системой кода.

Answer 2

Я думаю, вам подойдет localStorage

//Добавляем или изменяем значение:
localStorage.setItem('myKey', 'myValue'); //теперь у вас в localStorage хранится ключ "myKey" cо значением "myValue"
//Выводм его в консоль:
var localValue = localStorage.getItem('myKey');
console.log(localValue); //"myValue"
//удаляем:
localStorage.removeItem("myKey");
//очищаем все хранилище
localStorage.clear()
То же самое, только с квадратными скобками:
localStorage["Ключ"] = "Значение" //установка значения
localStorage["Ключ"] // Получение значения
delete localStorage["Ключ"] // Удаление значения