שנה את הנתונים שלך בקלות על ידי ביצוע המדריך הקצר והפשוט הזה.

כמפתח, אתה פתוח להתמודד עם אתגרים חדשים מדי יום בפרויקטים שונים שאתה עשוי לעבוד עליהם. יישומי אינטרנט צריכים לפעמים לבצע כמה משימות נוספות כדי להשיג מטרות שונות בהתאם לדרישות העסקיות או הטכניות.

ייתכן שיהיה עליך לאסוף נתונים מ-API ולעבד אותם בפורמט אחר כגון PDF, XML, DOCX או XLSX.

במדריך זה תלמד כיצד להפוך נתוני JSON שהתקבלו מתגובת API לגיליון אלקטרוני מאורגן היטב ביישום Angular שלך.

מהי ספריית XLSX?

ספריית Xlsx היא משאב יעיל עבור מפתחי Angular שרוצים להפוך נתוני JSON מתגובת API לגיליון אלקטרוני מסודר של Excel. באמצעות שימוש במודול זה, מפתחים עשויים להוריד ולשנות במהירות נתוני JSON.

אתה יכול להשתמש בספריית Xlsx כדי ליצור דוחות עבור הצוות שלך או כדי להציג נתונים בדרכים חדשות. אם אתה רוצה דרך מהירה וקלה לנהל את הנתונים שלך ביישומי JavaScript, זו אפשרות טובה.

כיצד להגדיר את ספריית XLSX עם יישום זוויתי

לפני שמתחילים עם ספריית Xlsx ביישום Angular שלך, חשוב שתגדיר סביבת פיתוח Node.js ו-Angular במחשב שלך. כאשר Node.js מותקן, קל להגדיר את Angular באמצעות הפעלה npm התקן -g @angular/cli בטרמינל.

instagram viewer

צור פרויקט Angular חדש על ידי הפעלה ng new [שם האפליקציה-זוויתי-שלך] בטרמינל. לאחר מכן נווט אל ספריית הפרויקט כפי שניתן לראות להלן:

אתה יכול גם להפעיל שרת פיתוח מקומי על ידי הפעלה ng serve --o, המאפשר לך להציג את אפליקציית Angular שלך ואת השינויים שבוצעו בה בזמן אמת בדפדפן.

לאחר הגדרת יישום Angular, התקנת ספריית Xlsx היא תהליך פשוט שאתה יכול להשלים פשוט על ידי הפעלת npm להתקין xlsx --שמור. פקודה זו תתקין את התלות הדרושות לשימוש בספריית Xlsx.

כיצד להמיר נתוני JSON לפורמט XLSX בזווית

עם Angular CLI, אתה יכול ליצור שירות חדש על ידי הפעלת ה ליצור שירות [שם שירות] פקודה בטרמינל. לדוגמה, במקרה זה, אתה יכול ליצור את שירות ה-Excel שאתה צריך באמצעותו ליצור שירות ExcelService.

זֶה לִיצוֹר הפקודה תיצור את קובץ השירות: ExcelService.service.ts, בתוך ה src/app ספריית הפרויקט. הקובץ נראה כך כברירת מחדל:

יְבוּא { הזרקה } מ'@angular/core'; 
@ניתן להזרקה({ מסופק ב: 'שורש' }) 
יְצוּאמעמדExcelServiceService{
בַּנַאִי() { } 
}

זֶה ExcelService הקובץ יטפל בפונקציונליות לייצוא נתונים לפורמט Excel. עדכן את ExcelService.service.ts הקובץ שייראה כמו הקוד שלהלן:

יְבוּא { הזרקה } מ'@angular/core'; 
יְבוּא * כפי ש XLSX מ'xlsx'; 
const EXCEL_EXTENSION = '.xlsx'; // סיומת קובץ אקסל


@ניתן להזרקה({ מסופק ב: 'שורש' }) 


יְצוּאמעמדExcelServiceService{ 
בַּנַאִי () { }


פּוּמְבֵּייצוא ל - Excel(אלמנט: any, fileName: מחרוזת): בָּטֵל{
// צור חוברת עבודה והוסף את גליון העבודה
const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (אלמנט);
const חוברת עבודה: XLSX.WorkBook = XLSX.utils.book_new(); 
// שמור לקובץ
 XLSX.utils.book_append_sheet (חוברת עבודה, ws, 'גיליון1');
 XLSX.writeFile (חוברת עבודה, ${fileName}${EXCEL_EXTENSION}); 
 }
}

בקוד לעיל, אתה מייבא את Xlsx ספרייה וליצור משתנה קבוע, EXCEL_EXTENSION כדי לאחסן את סיומת הקובץ של Excel.

ה יצוא ל - Excel השיטה מקבלת שני פרמטרים: אֵלֵמֶנט ו שם קובץ. פרמטר האלמנט מייצג את הנתונים לייצוא לקובץ Excel, בעוד ש- שם קובץ פרמטר הוא שם קובץ האקסל.

כדי לייצא את הנתונים לקובץ Excel, צור גליון עבודה באמצעות ה json_to_sheet שיטה של ​​ספריית Xlsx. צור גם חוברת עבודה באמצעות הספרייה ספר_חדש שיטה.

לאחר מכן, הוסף את גליון העבודה לחוברת העבודה עם ה book_append_sheet שיטה, ושמור את הקובץ לקובץ באמצעות writeFile.

מוקדם יותר יצרת שירות Excel כדי להקל על תהליך ההורדה וההמרה של נתוני JSON לגיליון Excel. כדי להשתמש בשירות זה, אתה צריך ליצור את רכיב ה-Angular הרלוונטי ולייבא את קובץ השירות לתוכו.

יְבוּא { ExcelService } מ'./excel.service';

לאחר מכן, עליך להזריק אותו לבנאי של הרכיב כך:

בַּנַאִי(ExcelService פרטי: ExcelService) { 
... 
}

אז אתה יכול להמשיך ליישם את הפונקציה (exportExcel) שבו תשתמש ב- יצוא ל - Excel שיטה לייצא JSON לאקסל. הקוד שלהלן מדגים כיצד לעשות זאת.

exportExcel(): בָּטֵל { 
const fileToExport = זֶה.apiJsonResponseData.map((פריטים: כל) => { 
לַחֲזוֹר {
"זהות המשתמש": פריטים?.userId,
"תְעוּדַת זֶהוּת": פריטים?.id,
"כותרת": פריטים?.title,
"גוּף": פריטים?.גוף
 } 
 });
זֶה‎.excelService.יצוא ל - Excel(
 fileToExport,
'yourExcelFile-' + חָדָשׁתַאֲרִיך().getTime() + '.xlsx'
 );
}

בקוד למעלה, הגדרת את ה exportExcel שיטה לקרוא ל- יצוא ל - Excel שיטת ה ExcelService. המשתנה החדש, fileToExport, מאחסן את הנתונים לייצוא. ה apiJsonResponseData המערך מכיל את נתוני ה-JSON שהתקבלו מתגובת ה-API.

לאחר מכן, ה יצוא ל - Excel שיטת ה excelService לוקח את fileToExport ואת המועדפת עליך שם קובץ. שימו לב כיצד תוכלו להוסיף את חותמת הזמן הנוכחית לשם הקובץ כדי להבטיח שהוא ייחודי. שיטה זו תמיר את נתוני ה-JSON ותייצא אותם לקובץ XLSX שאותו תוכל להציג בתצוגה מקדימה ב-Excel.

פונקציה זו זמינה כעת לשימוש בכל חלק ביישום Angular שלך, ותוכל להוסיף אותה בקלות כמטפל באירועים נְקִישָׁה אירוע או להשתמש בו בכל דרך מתאימה אחרת בהתבסס על הדרישות שלך.

אתה יכול לראות דוגמה לשימוש בפונקציונליות זו בתמונה למטה. נתוני JSON מממשק API חיצוני מעבדים בדף, עם כפתור כדי ייצוא נתונים לאקסל:

כאשר אתה לוחץ על ייצוא נתונים לאקסל לחצן, הדפדפן שלך יוריד את קובץ האקסל. כאשר אתה פתח את קובץ XLSX, קובץ הגיליון האלקטרוני של הפלט נראה כך:

ספריית Xlsx יכולה לעשות הרבה יותר מאשר להמיר JSON לפורמט Excel. הוא מציע ספרייה חזקה ותומך בפורמטים שונים של קבצים שאתה עלול להיתקל בהם בעסק. בדוק את התיעוד של ספריית Xlsx על npm כדי לברר יותר על זה.

המרת נתונים מ-JSON לגיליונות אלקטרוניים של Excel ב-Angular

אתה יכול להשתמש בספריית Xlsx כדי לתפעל בקלות גיליונות אלקטרוניים של Excel ביישום האינטרנט שלך. השלבים שביצעת כאן מאפשרים לך להפוך נתוני JSON ממשק API לגיליון אלקטרוני מאורגן היטב. אתה יכול גם להמיר נתוני Excel בחזרה ל-JSON באמצעות פונקציות אחרות בספרייה.

דרך טובה לתרגל את השימוש בספרייה זו היא לבנות אפליקציה שמפיקה דוחות שבועיים או חודשיים מ-API ומארגנת אותם כנתוני Excel.