Скачать или смотреть Извлечение данных из файла Excel в React JS | React XLSX

Извлечение данных из файла Excel в приложении React JS. Мы установим необходимые зависимости. Импортируем зависимости. Прочитаем файл Excel. Проанализируем данные и сохраним их в состоянии. Отобразим данные из состояния в компоненте.

Для выполнения задачи требуется библиотека xlsx для анализа файла Excel. Установите зависимости с помощью npm или yarn. Откройте терминал в проекте и выполните команду npm install xlsx. После установки зависимости импортируйте зависимости, такие как useState hook и xlsx. Импортируйте все экспортированные элементы из библиотеки xlsx и сделайте их доступными как объект XLSX. Определите состояние с именем data и функцию setData для его обновления. Инициализируйте это состояние начальным значением пустого массива. Создайте элемент ввода типа «file», позволяющий пользователю выбрать файл Excel из локальной файловой системы. Это поле файла будет запускать функцию handleFileUpload для обработки файла при выборе нового файла. Создайте функцию для чтения и анализа файла Excel.

HandleFileUpload принимает в качестве аргумента объект события e. Этот объект события автоматически передаётся браузером при срабатывании события onChange элемента ввода файла. Создайте новый экземпляр класса FileReader. Он предоставляет методы для чтения содержимого предоставленного файла. Метод readAsBinaryString вызывается у объекта чтения, чтобы начать чтение содержимого загруженного файла.

Свойство files объекта события e.target содержит список файлов, и первый файл передаётся методу. После чтения содержимого файла срабатывает событие onload и выполняется функция обратного вызова. Назначьте прослушиватель событий свойству onload объекта чтения. Этот прослушиватель событий представляет собой функцию обратного вызова, которая выполняется после успешного чтения содержимого файла FileReader. Передайте объект события e функции обратного вызова onload, содержащей свойство result. Свойство Result содержит содержимое файла в виде двоичной строки. Это содержимое присваивается переменной data.

Функция read из библиотеки xlsx используется для разбора «двоичных строковых данных» и создания объекта рабочей книги, представляющего файл Excel. Имя первого листа извлекается из объекта рабочей книги путём обращения к массиву SheetNames. Если вам нужно получить данные из другого листа, вы можете изменить номер здесь. Фактические данные первого листа извлекаются из объекта рабочей книги, используя извлечённое имя листа в качестве ключа.

Функция sheet to json используется для преобразования данных первого листа в объект JSON. Этот объект JSON представляет собой массив объектов строк, каждый из которых представляет строку листа. Вызовите функцию setData, чтобы обновить переменную состояния данными, используя разобранные данные JSON. Теперь у нас есть данные в состоянии.

Примените проверку, которая проверяет, не являются ли данные пустыми. Создайте таблицу и используйте метод map, чтобы получить ключи и значения отдельно для отображения данных из файла Excel. Теперь при загрузке файла Excel данные будут отображаться в таблице. Вот как мы можем отображать данные из файла Excel в React JS.

Получить код:
https://github.com/webstylepress/Fetc...

Извлечение данных из CSV-файла в React JS | React CSV
   • Fetch Data from CSV File in React JS | Rea...  
Извлечение данных из JSON-файла в React JS | React JSON [ ОБНОВЛЕНО ]
   • Fetch Data from JSON File in React JS | Re...  
7 способов использования изображений в React JS
   • 7 Ways to Use Images in ReactJS | React Im...  
Простой способ использования изображений в React JS | Без импорта | Нет Require
   • Easy Way to Use Images in React JS (No Imp...  
Require Image не работает в React JS
   • Require Image Not Working in ReactJS | Ima...  
Несколько изображений в одном импорте
   • Multiple Images in ONE IMPORT | ReactJS Tu...  
Несколько наборов изображений из одного импорта в React JS
   • Multiple Sets of Images from ONE IMPORT | ...  
Отображение записей или данных из JSON-файла в React JS
   • Display Data from JSON File in React JS  
Default Map не является функцией в React JS
   • Default MAP is Not a Function | React JS T...  
Асинхронный Await Fetch в React JS
   • Async Await Fetch Data from API in React J...  
Игровая площадка ReactJS
   • ReactJS Playground  

Наши обучающие материалы помогут вам ускорить карьерный рост, повысить эффективность работы и зарабатывать онлайн-фрилансером. Освойте навыки создания и дизайна профессиональных веб-сайтов, а также создания динамичных и интерактивных веб-приложений на JavaScript или WordPress. Наши обучающие материалы подойдут как новичкам, так и профессионалам. Независимо от того, только начинаете ли вы свой путь в этой области или хотите расширить свои знания, у нас есть что-то для вас. Присоединяйтесь к нам на пути к становлению опытным веб-разработчиком. Подпишитесь на наш канал, и давайте начнём!

Спасибо!
👍 ПОСТАВЬТЕ ЛАЙК ПОД ВИДЕО
👊 ПОДПИШИТЕСЬ
🔔 НАЖМИТЕ НА КОЛОКОЛЬЧИК
✍️ ОСТАВЬТЕ КОММЕНТАРИЙ

⚡Канал:    / @webstylepress  
⚡Сайт: https://www.w...