Cara Mengonversi Data JSON ke Excel Spreadsheet Dengan Angular

Sebagai pengembang, Anda terbuka untuk menghadapi tantangan baru setiap hari di berbagai proyek yang sedang Anda kerjakan. Aplikasi web terkadang harus melakukan beberapa tugas tambahan untuk mencapai tujuan yang berbeda tergantung pada persyaratan bisnis atau teknis.

Anda mungkin perlu mengumpulkan data dari API dan memprosesnya dalam format berbeda seperti PDF, XML, DOCX, atau XLSX.

Dalam panduan ini, Anda akan mempelajari cara mengubah data JSON yang diterima dari respons API menjadi spreadsheet Excel yang tertata rapi di aplikasi Angular Anda.

Apa itu Perpustakaan XLSX?

Pustaka Xlsx adalah sumber yang efektif untuk pengembang Angular yang ingin mengubah data JSON dari respons API menjadi spreadsheet Excel yang rapi. Melalui penggunaan modul ini, pengembang dapat mengunduh dan memodifikasi data JSON dengan cepat.

Anda dapat menggunakan pustaka Xlsx untuk membuat laporan untuk tim Anda atau menyajikan data dengan cara baru. Jika Anda menginginkan cara yang cepat dan mudah untuk mengelola data Anda di aplikasi JavaScript, ini adalah opsi yang bagus.

Cara Mengonfigurasi Pustaka XLSX Dengan Aplikasi Angular

Sebelum memulai dengan library Xlsx di aplikasi Angular Anda, penting untuk menyiapkan lingkungan pengembangan Node.js dan Angular di mesin Anda. Dengan Node.js terinstal, Angular mudah diatur dengan menjalankannya npm install -g @angular/cli di terminal.

Buat proyek Angular baru dengan menjalankan ng baru [nama-aplikasi-sudut-Anda] di terminal. Kemudian navigasikan ke direktori proyek seperti yang terlihat di bawah ini:

Anda juga dapat memulai server pengembangan lokal dengan menjalankan ng melayani --o, yang memungkinkan Anda untuk melihat aplikasi Angular Anda dan perubahan yang dilakukan padanya langsung di browser.

Setelah menyiapkan aplikasi Angular, menginstal Perpustakaan Xlsx adalah proses sederhana yang dapat Anda selesaikan hanya dengan menjalankannya npm instal xlsx --save. Perintah ini akan menginstal dependensi yang diperlukan untuk menggunakan library Xlsx.

Cara Mengonversi Data JSON ke Format XLSX di Angular

Dengan CLI Angular, Anda dapat menghasilkan layanan baru dengan menjalankan ng menghasilkan layanan [nama layanan] perintah di terminal. Misalnya, dalam hal ini, Anda dapat membuat layanan Excel yang perlu Anda gunakan ng menghasilkan layanan ExcelService.

Ini menghasilkan perintah akan membuat file layanan: ExcelService.service.ts, dalam src/aplikasi direktori proyek. File terlihat seperti ini secara default:

impor { Dapat disuntikkan } dari'@sudut/inti'; 
@Injeksi({ disediakanDalam: 'akar' }) 
eksporkelasExcelServiceService{
konstruktor() { } 
}

Ini Layanan Excel file akan menangani fungsi untuk mengekspor data ke format Excel. Perbarui ExcelService.service.ts file agar terlihat seperti kode di bawah ini:

impor { Dapat disuntikkan } dari'@sudut/inti'; 
impor * sebagai XLSX dari'xlsx'; 
const EXCEL_EXTENSION = '.xlsx'; // ekstensi file excel
@Injeksi({ disediakanDalam: 'akar' }) 
eksporkelasExcelServiceService{ 
konstruktor () { }
publikexportToExcel(elemen: apa saja, namafile: string): ruang kosong{
// hasilkan buku kerja dan tambahkan lembar kerja
const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet (elemen);
const buku kerja: XLSX.WorkBook = XLSX.utils.book_new(); 
// simpan ke file
 XLSX.utils.book_append_sheet (buku kerja, ws, 'Lembar1');
 XLSX.writeFile (buku kerja, ${fileName}${EXCEL_EXTENSION}); 
 }
}

Pada kode di atas, Anda mengimpor file Xlsx perpustakaan dan membuat variabel konstanta, EXCEL_EXTENSION untuk menyimpan ekstensi file Excel.

Itu exportToExcel metode menerima dua parameter: elemen Dan nama file. Parameter elemen mewakili data untuk diekspor ke file Excel, sedangkan nama file parameter adalah nama file Excel.

Untuk mengekspor data ke file Excel, buat lembar kerja menggunakan json_to_sheet metode perpustakaan Xlsx. Juga buat buku kerja menggunakan perpustakaan book_new metode.

Kemudian, tambahkan lembar kerja ke buku kerja dengan book_append_sheet metode, dan simpan ke file menggunakan writeFile.

Sebelumnya, Anda telah membuat layanan Excel untuk memfasilitasi proses pengunduhan dan konversi data JSON ke lembar Excel. Untuk menggunakan layanan ini, Anda perlu buat komponen Angular yang relevan dan impor file layanan ke dalamnya.

impor { Layanan Excel } dari'./excel.service';

Selanjutnya, Anda harus menyuntikkannya ke konstruktor komponen seperti ini:

konstruktor(layanan excel pribadi: Layanan Excel) { 
... 
}

Kemudian Anda dapat melanjutkan untuk mengimplementasikan fungsi (exportExcel) di mana Anda akan menggunakan exportToExcel metode untuk mengekspor JSON ke Excel. Kode di bawah ini menunjukkan cara melakukan ini.

eksporExcel(): ruang kosong { 
const fileToExport = ini.apiJsonResponseData.peta((item: apapun) => { 
kembali {
"Identitas pengguna": item?.userId,
"Pengenal": item?.id,
"Judul": item?.judul,
"Tubuh": item?.tubuh
 } 
 });
ini.excelService.exportToExcel(
 fileToEkspor,
'FileExcel-Anda-' + baruTanggal().getTime() + '.xlsx'
 );
}

Pada kode di atas, Anda telah mendefinisikan exportExcel metode untuk memanggil exportToExcel metode dari Layanan Excel. Variabel baru, fileToEkspor, menyimpan data yang akan diekspor. Itu apiJsonResponseData array berisi data JSON yang diperoleh dari respons API.

Selanjutnya, exportToExcel metode dari excelService mengambil fileToExport dan pilihan Anda nama file. Perhatikan bagaimana Anda dapat menambahkan stempel waktu saat ini ke nama file untuk memastikannya unik. Metode ini akan mengonversi data JSON dan mengekspornya ke file XLSX yang kemudian dapat Anda pratinjau di Excel.

Fungsi ini sekarang tersedia untuk digunakan di bagian manapun dari aplikasi Angular Anda, dan Anda dapat dengan mudah menambahkannya sebagai event handler untuk klik acara atau menggunakannya dengan cara lain yang sesuai berdasarkan kebutuhan Anda.

Anda dapat melihat contoh penggunaan fungsi ini pada gambar di bawah ini. Data JSON dari API eksternal dirender di halaman, dengan tombol untuk Ekspor Data ke Excel:

Ketika Anda mengklik Ekspor Data ke Excel tombol, browser Anda akan mengunduh file Excel. Ketika kamu buka file XLSX, file spreadsheet keluaran terlihat seperti ini:

Pustaka Xlsx dapat melakukan lebih dari sekadar mengonversi format JSON ke Excel. Ini menawarkan perpustakaan yang kuat dan mendukung berbagai format file yang mungkin Anda temui dalam bisnis. Lihat Dokumentasi perpustakaan Xlsx di npm untuk mengetahui lebih banyak tentang itu.

Mengonversi Data Dari JSON ke Excel Spreadsheets di Angular

Anda dapat menggunakan pustaka Xlsx untuk memanipulasi spreadsheet Excel dengan mudah di aplikasi web Anda. Langkah-langkah yang Anda lakukan di sini memungkinkan Anda mengubah data JSON dari API menjadi spreadsheet Excel yang tertata dengan baik. Anda juga dapat mengonversi data Excel kembali ke JSON menggunakan fungsi lain di pustaka.

Cara yang baik untuk berlatih menggunakan pustaka ini adalah membuat aplikasi yang menghasilkan laporan mingguan atau bulanan dari API dan mengaturnya sebagai data Excel.