با دنبال کردن این راهنمای کوتاه و ساده، داده های خود را به راحتی تغییر دهید.
به عنوان یک توسعه دهنده، شما آماده رویارویی با چالش های جدید روزانه در پروژه های مختلفی هستید که ممکن است روی آنها کار کنید. برنامه های کاربردی وب گاهی اوقات برای دستیابی به اهداف مختلف بسته به نیازهای تجاری یا فنی مجبورند کارهای اضافی را انجام دهند.
ممکن است لازم باشد داده‌ها را از یک API جمع‌آوری کنید و آنها را در قالب‌های متفاوتی مانند PDF، XML، DOCX یا XLSX پردازش کنید.
در این راهنما، یاد خواهید گرفت که چگونه داده های JSON دریافت شده از یک پاسخ API را به یک صفحه گسترده اکسل به خوبی سازماندهی شده در برنامه Angular خود تبدیل کنید.
کتابخانه XLSX چیست؟
کتابخانه Xlsx یک منبع موثر برای توسعه دهندگان Angular است که می خواهند داده های JSON را از یک پاسخ API به یک صفحه گسترده اکسل تبدیل کنند. از طریق استفاده از این ماژول، توسعه دهندگان ممکن است به سرعت داده های JSON را دانلود و تغییر دهند.
می توانید از کتابخانه Xlsx برای ایجاد گزارش برای تیم خود یا ارائه داده ها به روش های جدید استفاده کنید. اگر می خواهید یک راه سریع و آسان برای مدیریت داده های خود در برنامه های جاوا اسکریپت داشته باشید، این گزینه خوبی است.
نحوه پیکربندی کتابخانه XLSX با یک برنامه Angular
قبل از شروع کار با کتابخانه Xlsx در برنامه Angular، مهم است که Node.js و محیط توسعه Angular را روی دستگاه خود تنظیم کنید. با نصب Node.js، Angular با اجرای npm install -g@angular/cli در ترمینال آسان است.
با اجرای ng new [your-angular-app-name] در ترمینال، یک پروژه Angular جدید ایجاد کنید. سپس به دایرکتوری پروژه که در زیر مشاهده می کنید بروید:
همچنین می توانید یک سرور توسعه محلی را با اجرای ng serve –o راه اندازی کنید، که به شما امکان می دهد برنامه Angular خود و تغییرات ایجاد شده در آن را به صورت زنده در مرورگر مشاهده کنید.
با راه اندازی یک برنامه Angular، نصب کتابخانه Xlsx یک فرآیند ساده است که می توانید آن را به سادگی با اجرای npm install xlsx –save تکمیل کنید. این دستور وابستگی های مورد نیاز برای استفاده از کتابخانه Xlsx را نصب می کند.
نحوه تبدیل داده های JSON به فرمت XLSX در Angular
با Angular CLI، می‌توانید با اجرای دستور ng generate service [نام سرویس] در ترمینال، یک سرویس جدید ایجاد کنید. به عنوان مثال، در این مورد، می توانید سرویس Excel مورد نیاز خود را با استفاده از سرویس ng generate ExcelService تولید کنید.
این دستور تولید فایل سرویس را ایجاد می کند: ExcelService.service.ts، در دایرکتوری src/app پروژه. فایل به صورت پیش فرض به این صورت است:
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class ExcelServiceService {
constructor() { }
}
این فایل ExcelService عملکرد صادرات داده ها به فرمت اکسل را انجام می دهد. فایل ExcelService.service.ts را به شکل کد زیر به روز کنید:
import { Injectable } from '@angular/core';
import * as XLSX from 'xlsx';
const EXCEL_EXTENSION = '.xlsx'; // excel file extension
@Injectable({ providedIn: 'root' })
export class ExcelServiceService {
constructor () { }
public exportToExcel (element: any, fileName: string): void {
// generate workbook and add the worksheet
const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet(element);
const workbook: XLSX.WorkBook = XLSX.utils.book_new();
// save to file
XLSX.utils.book_append_sheet(workbook, ws, 'Sheet1');
XLSX.writeFile(workbook, ${fileName}${EXCEL_EXTENSION});
}
}
در کد بالا، کتابخانه Xlsx را وارد کرده و یک متغیر ثابت به نام EXCEL_EXTENSION برای ذخیره پسوند فایل اکسل ایجاد می‌کنید.
متد exportToExcel دو پارامتر عنصر و fileName را می پذیرد. پارامتر عنصر نشان دهنده داده هایی است که باید به فایل اکسل صادر شود، در حالی که پارامتر fileName نام فایل اکسل است.
برای صادر کردن داده ها به فایل اکسل، با استفاده از روش json_to_sheet کتابخانه Xlsx یک کاربرگ ایجاد کنید. همچنین با استفاده از روش library’s book_new یک کتاب کار ایجاد کنید.
سپس، کاربرگ را با روش book_append_sheet به کتاب کار اضافه کنید و با استفاده از writeFile آن را در یک فایل ذخیره کنید.
پیش از این، یک سرویس اکسل برای تسهیل فرآیند دانلود و تبدیل داده‌های JSON به برگه اکسل ایجاد کردید. برای استفاده از این سرویس، باید کامپوننت Angular مربوطه را ایجاد کرده و فایل سرویس را در آن وارد کنید.
import { ExcelService } from './excel.service';
سپس باید آن را به سازنده کامپوننت به صورت زیر تزریق کنید:
constructor(private excelService: ExcelService) {
....
}
سپس می‌توانید تابع (exportExcel) را پیاده‌سازی کنید که در آن از روش exportToExcel برای صادرات JSON به Excel استفاده می‌کنید. کد زیر نحوه انجام این کار را نشان می دهد.
exportExcel(): void {
const fileToExport = this.apiJsonResponseData.map((items:any) => {
return {
"User Id": items?.userId,
"Id": items?.id,
"Title": items?.title,
"Body": items?.body
}
});
this.excelService.exportToExcel(
fileToExport,
'yourExcelFile-' + new Date().getTime() + '.xlsx'
);
}
در کد بالا، متد exportExcel را برای فراخوانی متد exportToExcel از ExcelService تعریف کرده اید. متغیر جدید، fileToExport، داده ها را برای صادرات ذخیره می کند. آرایه apiJsonResponseData حاوی داده های JSON به دست آمده از پاسخ API است.
متعاقباً، متد exportToExcel از excelService، fileToExport و نام فایل مورد نظر شما را می گیرد. توجه کنید که چگونه می توانید مهر زمانی فعلی را به نام فایل اضافه کنید تا مطمئن شوید که منحصر به فرد است. این روش داده های JSON را تبدیل می کند و آن را به یک فایل XLSX صادر می کند که سپس می توانید در اکسل پیش نمایش آن را مشاهده کنید.
این تابع اکنون برای استفاده در هر بخشی از برنامه Angular شما در دسترس است و می‌توانید به راحتی آن را به عنوان کنترل کننده رویداد برای یک رویداد کلیک اضافه کنید یا بر اساس نیاز خود از آن به روش مناسب دیگری استفاده کنید.
نمونه ای از استفاده از این قابلیت را در تصویر زیر مشاهده می کنید. داده‌های JSON از یک API خارجی با دکمه صادرات داده به اکسل در صفحه نمایش داده می‌شود:
هنگامی که روی دکمه صادرات داده به اکسل کلیک می کنید، مرورگر شما فایل اکسل را دانلود می کند. هنگامی که فایل XLSX را باز می کنید، فایل صفحه گسترده خروجی به شکل زیر است:
کتابخانه Xlsx می تواند کارهای بسیار بیشتری از تبدیل JSON به فرمت اکسل انجام دهد. این یک کتابخانه قوی ارائه می دهد و از فرمت های فایل های مختلفی که ممکن است در تجارت با آنها روبرو شوید پشتیبانی می کند. برای کسب اطلاعات بیشتر در مورد آن، مستندات کتابخانه Xlsx را در npm بررسی کنید.
تبدیل داده ها از JSON به صفحات گسترده اکسل در Angular
می توانید از کتابخانه Xlsx برای دستکاری صفحات گسترده اکسل در برنامه وب خود استفاده کنید. مراحلی که در اینجا انجام داده اید به شما امکان می دهد داده های JSON را از یک API به یک صفحه گسترده اکسل به خوبی سازماندهی شده تبدیل کنید. همچنین می توانید داده های Excel را با استفاده از سایر توابع موجود در کتابخانه به JSON تبدیل کنید.
یک راه خوب برای تمرین استفاده از این کتابخانه، ساختن برنامه‌ای است که گزارش‌های هفتگی یا ماهانه را از یک API تولید می‌کند و آنها را به‌عنوان داده‌های اکسل سازماندهی می‌کند.