Преобразование объекта в JSON и загрузка в виде файла .json в React
У меня есть объект javascript, содержащий некоторую информацию.
Я хочу преобразовать это в JSON и загрузить как файл .json.
Похоже, я могу просто на JSON.stringify(obj) преобразовать его в JSON
но как мне загрузить его как файл .json?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы не сможете создать файл непосредственно в файловой системе вашего компьютера, так как это будет огромным риском для безопасности. Вы не можете сделать это с веб-страницы, используя JavaScript.
Вы можете написать службу на стороне сервера, чтобы публиковать свое состояние, и она создает файл - затем вы можете загрузить файл или довольствоваться тем, где он хранится на стороне сервера.
Другой способ через inMemory Создайте файл в памяти для загрузки пользователем, а не через сервер
Я не уверен, что это проблема, связанная с React, если вы просто хотите загрузить данные через JavaScript, но вот фрагмент, который я использую, который создает ссылку для загрузки содержимого данных, виртуально щелкая элемент и, наконец, удаляя его из ДОМ. Он должен поддерживать как современные браузеры, так и старые IE:
private exportToJson(objectData: SomeObject) {
let filename = "export.json";
let contentType = "application/json;charset=utf-8;";
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
var blob = new Blob([decodeURIComponent(encodeURI(JSON.stringify(objectData)))], { type: contentType });
navigator.msSaveOrOpenBlob(blob, filename);
} else {
var a = document.createElement('a');
a.download = filename;
a.href = 'data:' + contentType + ',' + encodeURIComponent(JSON.stringify(objectData));
a.target = '_blank';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
}
Также стоит отметить, что есть несколько способов подойти к этому, как цитируется в этом вопросе SO.
Интересно, что я не могу воспроизвести проблему с escape-символом, но для красивой печати вы можете использовать третий аргумент для JSON.stringify, например, JSON.stringify(objectData, null, 2), который будет включать символы LF для красивой печати и 2 пробела на уровень глубины в строковый объект.
Я добавлю отдельно, что второй аргумент JSON.stringify - это заменитель, который может быть функцией, изменяющей ключи и значения в объекте. Я предполагаю, что вы могли бы использовать функцию, аналогичную той, которая предоставлена в этот ответ, чтобы исправить печатаемые посторонние символы.
Для тех, кто приезжает сюда и ищет более простое решение:
<button
href = {`data:text/json;charset=utf-8,${encodeURIComponent(
JSON.stringify(YOURJSON)
)}`}
download = "filename.json"
>
{`Download Json`}
</button>
Использование JSON.stringify (YOURJSON, null, '\ t') вместо этого также загрузит отформатированный json. Я предложил изменение.
Это хранит данные json как "{\" name \ ": \" cliff \ ", \" age \ ": \" 34 \ "}" например. Есть ли способ сделать его так, чтобы escape-символы были удалены, а каждое значение было на новой строке?