React - запись данных формы в файл
У меня есть компонент реакции, который имеет форму, получающую пользовательский ввод. Вместо обычной кнопки отправки, которая отправляет данные формы, я хочу иметь возможность записывать эти данные в файл, чтобы их можно было использовать позже.
Можно ли это сделать с помощью vanilla JS или есть более полезная библиотека?
Мой метод отправки дескриптора выглядит следующим образом:
handleSubmit = e => {
e.preventDefault();
const data = JSON.stringify({
parameters: {
startTime: this.state.date,
selectors: this.state.selectors,
offset: this.state.offset,
"length.seconds": this.state.lengthSeconds,
"runtime.seconds": !this.state.checked
? this.state.runtimeSeconds
: undefined
}
});
console.info(data);
};
Обычно это отправляет данные внутри состояния формы на указанный мной URL-адрес.
Допустим, я хочу взять эти данные внутри состояния формы, вместо отправки записать их в файл.
handleSave = e => {
e.preventDefault();
const data = JSON.stringify({
parameters: {
startTime: this.state.date,
selectors: this.state.selectors,
offset: this.state.offset,
"length.seconds": this.state.lengthSeconds,
"runtime.seconds": !this.state.checked
? this.state.runtimeSeconds
: undefined
}
});
// write data to csv file here.
};
Возможно ли это сделать? Есть ли определенная библиотека, которая была бы здесь полезна?
У меня есть кодыпесочница здесь с более крупной демонстрацией моего компонента и формы
Что вы имеете в виду, что мне все равно нужно отправить его на сервер? Если я просто хочу сохранить его на диск, зачем нужна связь с сервером?
Возможно, вы захотите проверить что-то вроде github.com/eligrey/FileSaver.js
В зависимости от вашего варианта использования вы можете использовать localStorage.setItem('myData', data);
@pigeontoe это больше подходит для локального кэширования данных, верно? Моя идея состоит в том, чтобы файл экспортировался/импортировался в разные места, чтобы иметь возможность отправлять файл другому пользователю, где они могли бы импортировать эти данные. Поэтому, если бы мне просто нужно было, чтобы эти данные сохранялись в браузере, если пользователь ушел, локальное хранилище было бы очень полезным здесь.
Понимаю. Да, localStorage просто сохранит его в браузере.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете вызвать следующую функцию в своей функции handleSave:
function download(filename, text){
var blob = new Blob([text], {type: "text/plain"});
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = url;
a.download = filename;
a.click();
}
download("text.txt", "file contents here...");Список типов MIME здесь: https://www.freeformatter.com/mime-types-list.html#mime-types-list
В итоге я использовал это решение, что-то похожее, что вы могли бы сделать: <a href = {data:text/xml;base64,${btoa(response.data)}} download = "foo.xml">click me</a>. если вы устанавливаете его в состояние. Но с решением, которое я упомянул, вам нужно отобразить вторую кнопку, и в моем случае кнопка должна была делать две вещи асинхронно, поэтому ваше решение работает для меня.
Попробуйте сделать так, как показано ниже:
import React, { useState } from 'react'
export default () => {
const [formdata, setFormData] = useState({})
const onChange = event => setFormData({ ...formdata, [event.target.name]: event.target.value });
const downloadableData = encodeURIComponent(JSON.stringify(formdata, null, 2))
return <React.Fragment>
<form>
<input type = "text" name = "name" onChange = {onChange} value = {formdata.name || ''} />
<input type = "text" name = "address" onChange = {onChange} value = {formdata.address || ''} />
<input type = "text" name = "emailId" onChange = {onChange} value = {formdata.emailId || ''} />
</form>
<a href = {`data:applicatiom/json,${downloadableData}`} download = "formdata.json">Download Form Data</a>
</React.Fragment>
}
Вам все равно нужно отправить на сервер, браузер не может записывать файлы, поэтому вы все равно отправляете его. Какие серверные технологии вы используете? Вот где бы ты это сделал!