حول بياناتك بسهولة باتباع هذا الدليل المختصر والبسيط.
بصفتك مطورًا ، فأنت منفتح على مواجهة تحديات جديدة يوميًا في مشاريع مختلفة قد تعمل عليها. تضطر تطبيقات الويب أحيانًا إلى أداء بعض المهام الإضافية لتحقيق أهداف مختلفة اعتمادًا على العمل أو المتطلبات الفنية.
قد تحتاج إلى جمع البيانات من واجهة برمجة التطبيقات ومعالجتها بتنسيق مختلف مثل PDF أو XML أو DOCX أو XLSX.
في هذا الدليل ، ستتعلم كيفية تحويل بيانات JSON الواردة من استجابة API إلى جدول بيانات Excel منظم جيدًا في تطبيق Angular الخاص بك.
ما هي مكتبة XLSX؟
مكتبة Xlsx هي مورد فعال لمطوري Angular الذين يرغبون في تحويل بيانات JSON من استجابة API إلى جدول بيانات Excel أنيق. من خلال استخدام هذه الوحدة ، يمكن للمطورين تنزيل بيانات JSON وتعديلها بسرعة.
يمكنك استخدام مكتبة Xlsx لإنشاء تقارير لفريقك أو لتقديم البيانات بطرق جديدة. إذا كنت تريد طريقة سريعة وسهلة لإدارة بياناتك في تطبيقات JavaScript ، فهذا خيار جيد.
كيفية تكوين مكتبة XLSX باستخدام تطبيق الزاوي
قبل البدء في استخدام مكتبة Xlsx في تطبيق Angular الخاص بك ، من المهم أن يكون لديك بيئة تطوير Node.js و Angular مُعدة على جهازك. مع تثبيت Node.js ، يسهل إعداد Angular عن طريق التشغيل
تثبيت npm -g @ angular / cli في المحطة.قم بإنشاء مشروع Angular جديد عن طريق التشغيل ng new [your-angular-app-name] في المحطة. ثم انتقل إلى دليل المشروع كما هو موضح أدناه:
يمكنك أيضًا بدء تشغيل خادم تطوير محلي عن طريق التشغيل خدمة نانوغرام - o، والتي تمكنك من عرض تطبيق Angular الخاص بك والتغييرات التي تم إجراؤها عليه مباشرة في المتصفح.
بعد إعداد تطبيق Angular ، يعد تثبيت مكتبة Xlsx عملية بسيطة يمكنك إكمالها ببساطة عن طريق التشغيل npm تثبيت xlsx - حفظ. سيقوم هذا الأمر بتثبيت التبعيات اللازمة لاستخدام مكتبة Xlsx.
كيفية تحويل بيانات JSON إلى تنسيق XLSX في Angular
باستخدام Angular CLI ، يمكنك إنشاء خدمة جديدة عن طريق تشغيل ملف إنشاء خدمة [اسم الخدمة] الأمر في المحطة. على سبيل المثال ، في هذه الحالة ، يمكنك إنشاء خدمة Excel التي تحتاجها نانوغرام إنشاء خدمة ExcelService.
هذا يولد سيُنشئ الأمر ملف الخدمة: ExcelService.service.ts ، في ال src / التطبيق دليل المشروع. يبدو الملف كما يلي افتراضيًا:
يستورد {قابل للحقن} من"@ الزاوي / الأساسية";تضمين التغريدة({ المقدمة في: 'جذر' })
يصدّرفصلExcelServiceService{
البناء() { }
}
هذا ExcelService سيتعامل الملف مع وظيفة تصدير البيانات إلى تنسيق Excel. قم بتحديث ملف ExcelService.service.ts ملف ليبدو مثل الكود أدناه:
يستورد {قابل للحقن} من"@ الزاوي / الأساسية";
يستورد * مثل XLSX من"xlsx";مقدار ثابت EXCEL_EXTENSION = ".xlsx"; // اكسل امتداد الملف
تضمين التغريدة({ المقدمة في: 'جذر' })
يصدّرفصلExcelServiceService{
البناء () { }عامتصدير إلى Excel(element: any، fileName: string): فارغ{
// إنشاء مصنف وإضافة ورقة العمل
مقدار ثابت 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.
ال تصدير إلى Excel يقبل الأسلوب اثنين من المعلمات: عنصر و اسم الملف. تمثل معلمة العنصر البيانات المراد تصديرها إلى ملف Excel ، بينما يمثل ملف اسم الملف المعلمة هي اسم ملف Excel.
لتصدير البيانات إلى ملف Excel ، قم بإنشاء ورقة عمل باستخدام ملحق json_to_sheet طريقة مكتبة Xlsx. أنشئ أيضًا مصنفًا باستخدام مكتبة book_new طريقة.
بعد ذلك ، أضف ورقة العمل إلى المصنف بملحق book_append_sheet الطريقة ، وحفظها في ملف باستخدام writeFile.
في وقت سابق ، قمت بإنشاء خدمة Excel لتسهيل عملية تنزيل بيانات JSON وتحويلها إلى ورقة Excel. لاستخدام هذه الخدمة ، تحتاج إلى إنشاء المكون الزاوي المناسب واستيراد ملف الخدمة إليه.
يستورد {ExcelService} من"./excel.service";
بعد ذلك ، عليك إدخاله في مُنشئ المكون مثل هذا:
البناء(excelService خاصة: ExcelService) {
...
}
ثم يمكنك المضي قدمًا في تنفيذ الوظيفة (تصدير) حيث ستستخدم ملف تصدير إلى Excel طريقة لتصدير JSON إلى Excel. يوضح الكود أدناه كيفية القيام بذلك.
ExportExcel (): فارغ {
مقدار ثابت fileToExport = هذا.apiJsonResponseData.map ((العناصر: أي) => {
يعود {
"معرف المستخدم": العناصر؟ .userId ،
"بطاقة تعريف": items؟ .id،
"عنوان": items؟ .title،
"جسم": العناصر؟
}
});
هذا.excelService.تصدير إلى Excel(
fileToExport ،
'yourExcelFile-' + جديدتاريخ() .getTime () + ".xlsx"
);
}
في الكود أعلاه ، قمت بتعريف ملف تصدير طريقة استدعاء تصدير إلى Excel طريقة ExcelService. المتغير الجديد ، fileToExport ، يخزن البيانات للتصدير. ال apiJsonResponseData تحتوي المصفوفة على بيانات JSON التي تم الحصول عليها من استجابة API.
في وقت لاحق ، تصدير إلى Excel طريقة ExcelService يأخذ fileToExport وما تفضله اسم الملف. لاحظ كيف يمكنك إلحاق الطابع الزمني الحالي باسم الملف للتأكد من أنه فريد. ستعمل هذه الطريقة على تحويل بيانات JSON وتصديرها إلى ملف XLSX والذي يمكنك معاينته في Excel.
هذه الوظيفة متاحة الآن للاستخدام في أي جزء من تطبيق Angular الخاص بك ، ويمكنك إضافتها بسهولة كمعالج حدث لـ انقر الحدث أو استخدامه بأي طريقة مناسبة أخرى بناءً على متطلباتك.
يمكنك مشاهدة مثال على استخدام هذه الوظيفة في الصورة أدناه. يتم عرض بيانات JSON من واجهة برمجة تطبيقات خارجية على الصفحة ، مع وجود زر لـ تصدير البيانات إلى Excel:
عند النقر فوق ملف تصدير البيانات إلى Excel الزر ، سيقوم المتصفح بتنزيل ملف Excel. عندما انت افتح ملف XLSX، ملف جدول البيانات الناتج يبدو كالتالي:
يمكن لمكتبة Xlsx أن تفعل أكثر بكثير من تحويل JSON إلى تنسيق Excel. يوفر مكتبة قوية ويدعم تنسيقات الملفات المختلفة التي قد تواجهها في العمل. تفحص ال وثائق مكتبة Xlsx على npm لمعرفة المزيد عنها.
تحويل البيانات من JSON إلى جداول بيانات Excel في Angular
يمكنك استخدام مكتبة Xlsx لمعالجة جداول بيانات Excel بسهولة في تطبيق الويب الخاص بك. تتيح لك الخطوات التي نفذتها هنا تحويل بيانات JSON من واجهة برمجة التطبيقات إلى جدول بيانات Excel منظم جيدًا. يمكنك أيضًا تحويل بيانات Excel مرة أخرى إلى JSON باستخدام وظائف أخرى في المكتبة.
تتمثل إحدى الطرق الجيدة للتدرب على استخدام هذه المكتبة في إنشاء تطبيق يُنشئ تقارير أسبوعية أو شهرية من واجهة برمجة تطبيقات وينظمها كبيانات Excel.
