Export data ke Excel menggunakan exceljs dari sisi Front End (ReactJs)
Published: 2022-01-06 07:12:31


Pertama-tama kita kenalan dulu dengan [exceljs](https://www.npmjs.com/package/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](https://www.npmjs.com/package/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


![Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11q81ch1xmfpyr6oxnij.png)

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