Export data ke Excel menggunakan exceljs dari sisi Front End (ReactJs)

Pertama-tama kita kenalan dulu dengan exceljs, exceljs ini sebuah package javascript yang mendukung untuk membaca, memanipulasi, menulis data dan syle spreadsheet ke XLSX dan JSON.

Alasan Memakai exceljs

Package ini menjadi andalan saya untuk membuat excel dari sisi backend (NodeJs) maupun frontend (ReactJS). Dari segi fitur package ini cukup lengkap support untuk membuat csv dan membuat formula salah satunya, untuk styling juga sudah memadai, exceljs juga sudah support typescript, dan yang paling penting exceljs ini masih ada update untuk fitur-fitur yang baru.

selanjutnya mari kita coba

Setup

jalankan perintah dibawah ini untuk menginstall package

npm i exceljs
npm i file-server

file-server ini untuk mendownload file dari browser, lalu tinggal import seperti ini

import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

langsung kita coba yang simple saja

// Create WorkBook
const wb = new ExcelJS.Workbook();

//properties excel    
wb.creator = 'Ridho';
wb.lastModifiedBy = 'Pamungkas';
wb.created = new Date(2022, 1, 5);
wb.modified = new Date();
wb.lastPrinted = new Date(2022, 1, 5);

// Create Sheet
const ws = wb.addWorksheet();

// Set lebar Column menggunakan key bisa dengan huruf bisa dengan index angka
ws.columns = [
    { key: 'A', width: 10, },
    { key: 'B', width: 40, },
    { key: 'C', width: 40, },
];

// Set value cell untuk title
ws.getRow(1).getCell('A').value = 'Export data ke Excel menggunakan exceljs dari sisi Front End (ReactJs)';

// Set font Style
ws.getRow(1).getCell('A').font = {
     bold: true,
     size: 16
}

// merge cell dari A1 sampai C1
ws.mergeCells('A1', 'C1')

// inisiasi pada baris ke 3 jadi Header table
const rowHeader = ws.getRow(3);

// Buat styling cell header menggunakan perulangan agar tidak per cell kita bikinnya
for (let i = 1; i <= 3; i++) {
      // Untuk border table
      rowHeader.getCell(i).border = {
         top: { style: 'thin' },
         left: { style: 'thin' },
         bottom: { style: 'thin' },
         right: { style: 'thin' }
      }
      // Untuk fill color cell
      rowHeader.getCell(i).fill = {
         type: 'pattern',
         pattern: 'solid',
         fgColor: { argb: '191970' },
      }
      // Untuk alignment text dalam cell
      rowHeader.getCell(i).alignment = {
         vertical: 'middle', horizontal: 'center'
      }
      // Untuk set font
      rowHeader.getCell(i).font = {
         bold: true,
         size: 11,
         color: { argb: 'FFFFFF' },
      }
}

// Isi data Header 
rowHeader.getCell(1).value = 'No';
rowHeader.getCell(2).value = 'First Name';
rowHeader.getCell(3).value = 'Last Name';

// Buat datanya menggunakan perulangan
for (let i = 1; i <= 5; i++) {
    const row = ws.getRow(3 + i)
    for (let index = 1; index <= 3; index++) {
         row.getCell(index).border = {
             top: { style: 'thin' },
             left: { style: 'thin' },
             bottom: { style: 'thin' },
             right: { style: 'thin' }
          }
     }
     row.getCell(1).value = i;
     row.getCell(2).value = `first name ${i}`;
     row.getCell(3).value = `last name ${i}`;
}

//membuat buffer file
const buf = await wb.xlsx.writeBuffer();

//download file dari browser dan menamai filenya
saveAs(new Blob([buf]), 'Sample Excel.xlsx')

Hasilnya akan seperti ini

Untuk lebih kompleks cara menggunakan properties exceljs bisa dibaca di https://github.com/exceljs/exceljs