Реагируйте: запись в файл json или экспорт / загрузка [без сервера]

Question

Я действительно запутался с файловым вводом / выводом в JS / TS. большинство примеров, которые я вижу, работает с DOM и имеет решения на основе браузера.

Кроме того, я не понял, как заставить fs работать, похоже, нужен конфиг веб-пакета, где я использую CRA и не хочу извлекать.

в компоненте React Я хочу получить некоторые данные с сервера, а затем сохранить их в виде файла JSON в папке проекта (тот же путь, корень, общая папка, неважно) или загрузить напрямую (кнопка не требуется).

//data type just in case
inteface IAllData{ name:string; allData:IData[];}

поэтому после получения некоторых данных нужно сохранить их в name.json

public componentDidMount(){
   this.fetchData().then(()=>this.saveData())
}

public async fetchData(){/* sets data in state*/}

public saveData(){
    const {myData}=this.state;
    const fileName=myData.name;
    const json=JSON.stringify(myData);
    const blob=new Blob([json],{type:'application/json'})
    /* How to write/download this blob as a file? */
}

здесь пытается window.navigator.msSaveOrOpenBlob(blob, 'export.json'); не работает

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

Answer 1

У меня был BLOB-объект, содержащий данные, и я нашел решение для stackoverflow, немного изменил его и успешно загрузил в виде файла xlsx. Я добавляю свой код ниже, он тоже может вам помочь.

const blob =  await res.blob(); // blob just as yours
const href = await URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = href;
link.download = "file.xlsx";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

РЕДАКТИРОВАТЬ: я написал функцию для вашего случая, вы можете использовать функцию ниже, но будьте осторожны с "fileName" (в моем случае это не объект "this.state") и объектом "myData", который хранится в " this.state "object.

const downloadFile = async () => {
  const {myData} = this.state; // I am assuming that "this.state.myData"
                               // is an object and I wrote it to file as
                               // json
  const fileName = "file";
  const json = JSON.stringify(myData);
  const blob = new Blob([json],{type:'application/json'});
  const href = await URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = href;
  link.download = fileName + ".json";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}