В этом руководстве мы узнаем, как импортировать любой CSV-файл, полученный от пользователя, с помощью React. Наше приложение будет состоять из двух частей. Мы создадим форму, чтобы пользователь мог выбрать файл. Затем мы выполним несколько операций с Javascript, чтобы иметь возможность просматривать этот CSV-файл. Давайте начнем с нашего примера.
Пример
Сначала создадим форму в React, чтобы пользователь мог загрузить CSV-файл.
function App() {
return (
<div style={{ textAlign: "center" }}>
<h1>REACTJS CSV IMPORT EXAMPLE </h1>
<form>
<input type={"file"} accept={".csv"} />
<button>IMPORT CSV</button>
</form>
</div>
);
}
Мы создали простую форму и наши элементы ввода. С помощью функции accept элемента ввода мы указали, что формат файла может быть только CSV. Теперь давайте загрузим и прочитаем CSV-файл, выбранный пользователем, с помощью FileReader.
import React, { useState } from "react";
function App() {
const [file, setFile] = useState();
const fileReader = new FileReader();
const handleOnChange = (e) => {
setFile(e.target.files[0]);
};
const handleOnSubmit = (e) => {
e.preventDefault();
if (file) {
fileReader.onload = function (event) {
const csvOutput = event.target.result;
};
fileReader.readAsText(file);
}
};
return (
<div style={{ textAlign: "center" }}>
<h1>REACTJS CSV IMPORT EXAMPLE </h1>
<form>
<input
type={"file"}
id={"csvFileInput"}
accept={".csv"}
onChange={handleOnChange}
/>
<button
onClick={(e) => {
handleOnSubmit(e);
}}
>
IMPORT CSV
</button>
</form>
</div>
);
}
Здесь, после успешной загрузки выбранного пользователем файла, мы можем обработать и отобразить его. Теперь давайте загрузим образец CSV-файла и посмотрим его вывод на консоль.
Как вы можете видеть, теперь мы можем прочитать выбранный CSV-файл. Мы можем преобразовать этот файл, который мы прочитали как обычный текстовый тип, в массив объектов с помощью JavaScript и поместить его внутрь элемента Table.
function App() {
import React, { useState } from "react";
function App() {
const [file, setFile] = useState();
const [array, setArray] = useState([]);
const fileReader = new FileReader();
const handleOnChange = (e) => {
setFile(e.target.files[0]);
};
const csvFileToArray = string => {
const csvHeader = string.slice(0, string.indexOf("n")).split(",");
const csvRows = string.slice(string.indexOf("n") + 1).split("n");
const array = csvRows.map(i => {
const values = i.split(",");
const obj = csvHeader.reduce((object, header, index) => {
object[header] = values[index];
return object;
}, {});
return obj;
});
setArray(array);
};
const handleOnSubmit = (e) => {
e.preventDefault();
if (file) {
fileReader.onload = function (event) {
const text = event.target.result;
csvFileToArray(text);
};
fileReader.readAsText(file);
}
};
const headerKeys = Object.keys(Object.assign({}, ...array));
return (
<div style={{ textAlign: "center" }}>
<h1>REACTJS CSV IMPORT EXAMPLE </h1>
<form>
<input
type={"file"}
id={"csvFileInput"}
accept={".csv"}
onChange={handleOnChange}
/>
<button
onClick={(e) => {
handleOnSubmit(e);
}}
>
IMPORT CSV
</button>
</form>
<br />
<table>
<thead>
<tr key={"header"}>
{headerKeys.map((key) => (
<th>{key}</th>
))}
</tr>
</thead>
<tbody>
{array.map((item) => (
<tr key={item.id}>
{Object.values(item).map((val) => (
<td>{val}</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
}
....
Мы отформатировали CSV-файл, который пришел в формате простого текста, используя методы Javascript slice и split, и создали два отдельных массива. Затем мы преобразовали массивы Header и Rows в Array of Object формата Key, Value.
Живой пример Codesandbox
Вы ищете React Web Framework?
Основанный на React фреймворк для создания приложений с большим объемом данных в кратчайшие сроки. refine предлагает множество готовых функций для быстрой разработки без ущерба для высокой настраиваемости. Примеры использования включают, но не ограничиваются админ-панелями, B2B-приложениями и приборными панелями.
⚙️ Нулевая конфигурация: Однострочная настройка с помощью суперпланшета. Запуск проекта занимает меньше минуты.
📦 Из коробки: Маршрутизация, сеть, аутентификация, управление состоянием, i18n и UI.
🔌 Независимость от бэкенда: подключается к любому пользовательскому бэкенду. Встроенная поддержка REST API, Strapi, NestJs CRUD, Airtable, Supabase, Appwrite и Altogic.
📝 Native Typescript Core : Вы всегда можете отказаться от использования обычного JavaScript.
🔘 Decoupled UI : UI компоненты открываются напрямую без инкапсуляции. У вас есть полный контроль над элементами пользовательского интерфейса.
🐜 Мощный пользовательский интерфейс по умолчанию: работает без проблем с интегрированной системой Ant Design System. (Поддержка нескольких фреймворков пользовательского интерфейса находится в дорожной карте).
📝 Код без кодовых пластин: Сохраняет вашу кодовую базу чистой и читабельной.
Для получения дополнительной информации обратитесь к документации по refine. →
Как импортировать CSV с помощью Refine?
Импорт CSV в refine — это очень простая и готовая к использованию функция. Как ее использовать, объясняется шаг за шагом в руководстве и примере.
Для получения дополнительной информации обратитесь к руководству по импорту CSV в refine. →
Просмотреть источник
Использование Refine CSV Import
Импорт файлов CSV осуществляется просто и быстро с помощью хука useImport и кнопки ImportButton, предоставляемых Refine.
import {
List,
Table,
useTable,
useImport,
ImportButton,
} from "@pankod/refine";
export const PostList: React.FC = () => {
const { tableProps } = useTable<IPost>();
const importProps = useImport<IPostFile>();
return (
<List
pageHeaderProps={{
extra: <ImportButton {...importProps} />,
}}
>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column dataIndex="title" title="Title" />
<Table.Column dataIndex="status" title="Status" />
</Table>
</List>
);
};
interface IPostFile {
title: string;
categoryId: string;
}
interface IPost {
id: string;
title: string;
status: string;
}
Вы также можете разделить данные на фрагменты с помощью опции batchSize при выполнении процесса вставки.
Для получения дополнительной информации обратитесь к Ссылкам API Refine CSV Import API. →
Refine CSV Import Live Codesandbox Пример