Как загружать и скачивать файлы CSV с помощью AngularJS

Как загружать и скачивать файлы CSV с помощью AngularJS

От автора: эта статья расскажет, как загрузить CSV файл в AngularJS, читать его и затем конвертировать в JSON для обработки. Затем вы узнаете, как сделать все это в обратном порядке и скачать дамп данных CSV из AngularJS.

CSV-файлы выбирают из-за их простоты. Они также широко поддерживаются многими типами программ и обеспечивают простой способ представления данных электронных таблиц.

Предварительные условия

Прежде чем приступить к работе, убедитесь, что на вашем компьютере установлен Node.js. Если у вас его еще нет, перейдите на официальный сайт и установите его. Вы также должны иметь базовое понимание следующих технологий: HTML, CSS и JavaScript.

Если у вас уже установлен Node.js, проверьте, есть ли у вас последние версии Node и NPM.

Модули CSV в Angular

Существует несколько способов управления CSV в Angular:

Papa Parse: Papa Parse — мощный парсер CSV, который способен анализировать строки CSV в небольших и больших файлах, а также преобразовывать обратно в JSON. Мы будем использовать эту библиотеку в этом уроке.

csvtojson: Это пакет node, который также прост в использовании.

File Reader: используется для чтения содержимого файлов с использованием объектов File или Blob для указания файла, который нужно прочитать. Однако это не эффективный способ, потому что вам все равно придется перебирать все строки CSV, а затем JSON.stringify результаты.

Начало работы

Наша цель:

Скачать CSV-файл на стороне клиента

загрузить файл CSV

прочитать файл CSV

конвертировать CSV-файлы в JSON для обработки

Наш интерфейс должен выглядеть примерно так:

Сначала мы начнем с написания кода HTML для интерфейса, показанного выше. Создайте папку с именем my_project, выполните команду cd в папку проекта и создайте два файла: home.html и app.js.

Поскольку мы будем использовать модуль Papa Parse, перейдите на официальный сайт и загрузите библиотеку. Затем извлеките содержимое и сохраните файлы papaparse.js и papaparse.min.js в папке проекта. Структура проекта должна выглядеть так:

Ниже приведен код HTML для создания нашего интерфейса. Сохраните его как home.html.

В приведенном выше коде мы используем директиву ng-app для определения нашего приложения. Затем мы добавляем библиотеки AngularJS и jQuery на нашу веб-страницу, а также остальные файлы скриптов, то есть app.js, papaparse.js и papaparse.min.js.

Далее мы определяем контроллер приложения, а затем привязываем элементы HTML к данным приложения.

Скачивание файла CSV

Поскольку у нас уже есть интерфейс со ссылкой, где пользователь сможет загрузить CSV-файл, теперь перейдем к написанию кода Angular, который будет содержать загружаемые данные, а затем привяжем его с помощью элементов HTML.

Создаем CSV для загрузки на клиентской стороне. В app.js инициализируйте приложение Angular и определите контроллер CsvCtrl.

Затем определите образцы данных в JSON и преобразуйте их в CSV-файл с помощью модуля Papa Parse.

Загрузка и чтение файла CSV

Ниже представлена функция Angular, которая загружает и считывает CSV-файл.

Здесь мы подтверждаем, что CSV действителен и не пуст. Если он пуст или файл CSV не загружен, мы предоставляем пользователю предупреждение: «Пожалуйста, загрузите файл». Если CSV действителен, мы преобразуем данные в формат таблицы и представляем их, как показано ниже.

Преобразование CSV-файла в JSON

В последней части этого урока мы преобразуем CSV-данные в формат JSON (форма, которая может быть использована API). Ниже приведена функция, которая преобразует данные CSV в JSON. Мы будем печатать данные только на консоли, так как у нас нет API для использования данных.

В вышеприведенной функции мы получаем файл CSV и используем Papa Parse для преобразования его в JSON. Полный код в app.js показан ниже.

Заключение

В этой статье вы узнали, как загружать и скачивать CSV-данные и как парсить данные CSV в JSON и из него.

Надеюсь, этот урок поможет вам понять, как манипулировать CSV-файлами с помощью модуля Papa Parse и насколько мощна эта библиотека. Не стесняйтесь экспериментировать с большими файлами, чтобы увидеть полную функциональность библиотеки Papa Parse.

Автор: Esther Vaati

Источник: //code.tutsplus.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: