Преобразуйте свои данные с легкостью, следуя этому краткому и простому руководству.

Как разработчик, вы готовы ежедневно сталкиваться с новыми проблемами в различных проектах, над которыми вы, возможно, работаете. Веб-приложениям иногда приходится выполнять некоторые дополнительные задачи для достижения различных целей в зависимости от бизнес-требований или технических требований.

Возможно, вам потребуется собрать данные из API и обработать их в другом формате, таком как PDF, XML, DOCX или XLSX.

В этом руководстве вы узнаете, как преобразовать данные JSON, полученные из ответа API, в хорошо организованную электронную таблицу Excel в вашем приложении Angular.

Что такое библиотека XLSX?

Библиотека Xlsx — эффективный ресурс для разработчиков Angular, которые хотят преобразовать данные JSON из ответа API в аккуратную электронную таблицу Excel. С помощью этого модуля разработчики могут быстро загружать и изменять данные JSON.

Вы можете использовать библиотеку Xlsx для создания отчетов для своей команды или для представления данных новыми способами. Если вам нужен быстрый и простой способ управления данными в приложениях JavaScript, это хороший вариант.

instagram viewer

Как настроить библиотеку XLSX с помощью приложения Angular

Прежде чем приступить к работе с библиотекой Xlsx в приложении Angular, важно настроить на своем компьютере среду разработки Node.js и Angular. С установленным Node.js Angular легко настроить, запустив npm установить -g @angular/cli в терминале.

Создайте новый проект Angular, запустив ng новое [ваше-угловое-имя-приложения] в терминале. Затем перейдите в каталог проекта, как показано ниже:

Вы также можете запустить локальный сервер разработки, запустив нг служить --o, который позволяет просматривать ваше приложение Angular и внесенные в него изменения в режиме реального времени в браузере.

После настройки приложения Angular установка библиотеки Xlsx — это простой процесс, который вы можете выполнить, просто запустив npm установить xlsx --save. Эта команда установит зависимости, необходимые для использования библиотеки Xlsx.

Как преобразовать данные JSON в формат XLSX в Angular

С помощью Angular CLI вы можете создать новую службу, запустив ng сгенерировать сервис [имя сервиса] команду в терминале. Например, в этом случае вы можете сгенерировать нужный вам сервис Excel, используя нг генерировать сервис ExcelService.

Этот генерировать команда создаст служебный файл: ExcelService.service.ts, в источник/приложение каталог проекта. По умолчанию файл выглядит так:

Импортировать { Инъекционный } от'@угловой/ядро'; 
@Инъекционный({ предоставлено в: 'корень' }) 
экспортсортЭксельСервисСервис{
конструктор() { } 
}

Этот ЭксельСервис файл будет обрабатывать функциональность для экспорта данных в формат Excel. Обновите ExcelService.service.ts файл, чтобы он выглядел как код ниже:

Импортировать { Инъекционный } от'@угловой/ядро'; 
Импортировать * как XLSX от'xlsx'; 
константа EXCEL_РАСШИРЕНИЕ = '.xlsx'; // расширение файла excel


@Инъекционный({ предоставлено в: 'корень' }) 


экспортсортЭксельСервисСервис{ 
конструктор () { }


публичныйЭкспорт в Excel(элемент: любой, имя_файла: строка): пустота{
// создать рабочую книгу и добавить рабочий лист
константа ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (элемент);
константа книга: XLSX.WorkBook = XLSX.utils.book_new(); 
// сохранить в файл
 XLSX.utils.book_append_sheet (книга, ws, «Лист1»);
 XLSX.writeFile (книга, ${имя_файла}${EXCEL_EXTENSION}); 
 }
}

В приведенном выше коде вы импортируете XLSX библиотеку и создать постоянную переменную, EXCEL_EXTENSION для хранения расширения файла Excel.

Экспорт в Excel метод принимает два параметра: элемент и имя файла. Параметр element представляет данные для экспорта в файл Excel, а имя файла параметр - это имя файла Excel.

Чтобы экспортировать данные в файл Excel, создайте рабочий лист, используя json_to_sheet метод библиотеки Xlsx. Также создайте рабочую книгу, используя библиотеку book_new метод.

Затем добавьте рабочий лист в рабочую книгу с book_append_sheet метод и сохраните в файл, используя writeFile.

Ранее вы создали службу Excel, чтобы облегчить процесс загрузки и преобразования данных JSON в лист Excel. Чтобы воспользоваться этой услугой, вам необходимо создайте соответствующий компонент Angular и импортируйте в него служебный файл.

Импортировать {ExcelService} от'./excel.service';

Затем вы должны внедрить его в конструктор компонента следующим образом:

конструктор(частный excelService: ExcelService) { 
... 
}

Затем вы можете приступить к реализации функции (экспортExcel), где вы будете использовать Экспорт в Excel способ экспорта JSON в Excel. В приведенном ниже коде показано, как это сделать.

экспортExcel(): пустота { 
константа файлЭкспорт = этот.apiJsonResponseData.map((предметы: любые) => { 
возвращаться {
"ID пользователя": элементы?.userId,
"Идентификатор": предметы?.id,
"Заголовок": элементы?.название,
"Тело": предметы?.тело
 } 
 });
этот.excelService.Экспорт в Excel(
 файл для экспорта,
'вашExcelFile-' + новыйДата().получить время() + '.xlsx'
 );
}

В приведенном выше коде вы определили экспортExcel метод для вызова Экспорт в Excel метод ЭксельСервис. Новая переменная, файл для экспорта, сохраняет данные для экспорта. апижсонреспонседата Массив содержит данные JSON, полученные из ответа API.

Впоследствии Экспорт в Excel метод excelService берет файлтоэкспорт и ваш предпочтительный имя файла. Обратите внимание, как вы можете добавить текущую метку времени к имени файла, чтобы обеспечить его уникальность. Этот метод преобразует данные JSON и экспортирует их в файл XLSX, который затем можно просмотреть в Excel.

Эта функция теперь доступна для использования в любой части вашего приложения Angular, и вы можете легко добавить ее в качестве обработчика событий для нажмите событие или использовать его любым другим подходящим способом в зависимости от ваших требований.

Вы можете увидеть пример использования этой функции на изображении ниже. Данные JSON из внешнего API отображаются на странице с кнопкой для Экспорт данных в Excel:

Когда вы нажимаете на Экспорт данных в Excel кнопку, ваш браузер загрузит файл Excel. Когда ты открыть XLSX-файл, выходной файл электронной таблицы выглядит следующим образом:

Библиотека Xlsx может делать гораздо больше, чем конвертировать JSON в формат Excel. Он предлагает надежную библиотеку и поддерживает различные форматы файлов, с которыми вы можете столкнуться в бизнесе. Проверьте Документация библиотеки Xlsx по npm чтобы узнать больше об этом.

Преобразование данных из JSON в электронные таблицы Excel в Angular

Вы можете использовать библиотеку Xlsx, чтобы легко управлять электронными таблицами Excel в своем веб-приложении. Шаги, которые вы выполнили здесь, позволяют преобразовать данные JSON из API в хорошо организованную электронную таблицу Excel. Вы также можете преобразовать данные Excel обратно в JSON, используя другие функции в библиотеке.

Хороший способ попрактиковаться в использовании этой библиотеки — создать приложение, которое генерирует еженедельные или ежемесячные отчеты из API и упорядочивает их как данные Excel.