Трансформирайте данните си с лекота, като следвате това кратко и просто ръководство.

Като разработчик вие сте отворени да се изправяте ежедневно пред нови предизвикателства в различни проекти, върху които може да работите. Уеб приложенията понякога трябва да изпълняват някои допълнителни задачи, за да постигнат различни цели в зависимост от бизнес или технически изисквания.

Може да се наложи да съберете данни от 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 install -g @angular/cli в терминал.

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

Можете също така да стартирате локален сървър за разработка, като стартирате ng сервирам --o, което ви позволява да преглеждате приложението си Angular и направените в него промени на живо в браузъра.

След като сте настроили приложение Angular, инсталирането на библиотеката Xlsx е прост процес, който можете да завършите просто като стартирате npm инсталирате xlsx --save. Тази команда ще инсталира зависимостите, необходими за използване на библиотеката Xlsx.

Как да конвертирате JSON данни във формат XLSX в Angular

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

Това генерирам командата ще създаде сервизния файл: ExcelService.service.ts, в src/приложение директория на проекта. Файлът изглежда така по подразбиране:

импортиране { Инжекционен } от'@angular/core'; 
@Инжекционен({ ПредоставеноВ: "корен" }) 
износкласExcelServiceService{
конструктор() { } 
}

Това ExcelService файлът ще обработва функционалността за експортиране на данни във формат на Excel. Актуализирайте ExcelService.service.ts файл да изглежда като кода по-долу:

импортиране { Инжекционен } от'@angular/core'; 
импортиране * като XLSX от"xlsx"; 
конст EXCEL_EXTENSION = '.xlsx'; // excel файлово разширение


@Инжекционен({ ПредоставеноВ: "корен" }) 


износкласExcelServiceService{ 
конструктор () { }


публиченекспортиране в Excel(елемент: всеки, име на файл: низ): невалиден{
// генериране на работна книга и добавяне на работния лист
конст ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (елемент);
конст работна книга: XLSX.WorkBook = XLSX.utils.book_new(); 
// запиши във файл
 XLSX.utils.book_append_sheet (работна книга, ws, „Лист1“);
 XLSX.writeFile (работна книга, ${fileName}${EXCEL_EXTENSION}); 
 }
}

В горния код импортирате Xlsx библиотека и създайте постоянна променлива, EXCEL_EXTENSION за съхраняване на файловото разширение на Excel.

The експортиране в Excel методът приема два параметъра: елемент и име на файл. Параметърът на елемента представлява данните за експортиране във файла на Excel, докато име на файл параметърът е името на Excel файла.

За да експортирате данните във файла на Excel, създайте работен лист, като използвате json_to_sheet метод на библиотеката Xlsx. Също така създайте работна книга, като използвате библиотеката книга_нова метод.

След това добавете работния лист към работната книга с книга_допълнение_лист метод и запишете във файл с помощта на writeFile.

По-рано създадохте услуга на Excel, за да улесните процеса на изтегляне и конвертиране на JSON данни в лист на Excel. За да използвате тази услуга, трябва създайте съответния Angular компонент и импортирайте служебния файл в него.

импортиране { ExcelService } от'./excel.service';

След това трябва да го инжектирате в конструктора на компонента по следния начин:

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

След това можете да продължите с прилагането на функцията (експортиране на Excel), където ще използвате експортиране в Excel метод за експортиране на JSON в Excel. Кодът по-долу демонстрира как да направите това.

експортиране на Excel (): невалиден { 
конст fileToExport = това.apiJsonResponseData.map((елементи: всякакви) => { 
връщане {
„Потребителско име“: елементи?.userId,
"Документ за самоличност": елементи?.id,
"Заглавие": елементи?.title,
"тяло": елементи?.тяло
 } 
 });
това.excelService.exportToExcel(
 fileToExport,
'вашият файл в Excel-' + новДата().getTime() + '.xlsx'
 );
}

В кода по-горе вие ​​сте дефинирали експортиране на Excel метод за извикване на експортиране в Excel метод на ExcelService. Новата променлива, fileToExport, съхранява данните за експортиране. The apiJsonResponseData масивът съдържа JSON данните, получени от отговора на API.

Впоследствие, експортиране в Excel метод на excelService взема fileToExport и вашият предпочитан име на файл. Забележете как можете да добавите текущото времево клеймо към името на файла, за да сте сигурни, че е уникален. Този метод ще преобразува 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.