Membuat Sistem Export Data

Fitur export data sangat penting untuk aplikasi UMKM, dashboard analytics, laporan keuangan, dan generator dokumen. Dengan export Excel, PDF, dan JSON, pengguna dapat menyimpan data mereka dalam format profesional dan mudah dibagikan.

1. Export Data ke Excel (XLSX)

Menggunakan library SheetJS (xlsx) adalah cara paling mudah.

// data contoh
const data = [
  { nama: "Andi", total: 50000 },
  { nama: "Budi", total: 75000 }
];

function exportExcel() {
  const worksheet = XLSX.utils.json_to_sheet(data);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "Data");
  XLSX.writeFile(workbook, "laporan.xlsx");
}

2. Export Data ke PDF

Paling mudah menggunakan library html2pdf.js.

// HTML yang diexport
<div id="laporanPdf">
  <h3>Laporan Transaksi</h3>
  <p>Total: Rp 150.000</p>
</div>

// JavaScript export PDF
function exportPDF() {
  const element = document.getElementById("laporanPdf");
  html2pdf().from(element).save("laporan.pdf");
}

3. Export Data ke JSON

Format JSON sangat cocok untuk backup data dan integrasi API.

function exportJSON(data) {
  const file = new Blob([JSON.stringify(data, null, 2)], {
    type: "application/json"
  });

  const link = document.createElement("a");
  link.href = URL.createObjectURL(file);
  link.download = "backup.json";
  link.click();
}

4. Export Data ke CSV

function exportCSV(data) {
  const header = Object.keys(data[0]).join(",");
  const rows = data.map(obj => Object.values(obj).join(",")).join("\n");

  const csv = header + "\n" + rows;
  const file = new Blob([csv], { type: "text/csv" });

  const link = document.createElement("a");
  link.href = URL.createObjectURL(file);
  link.download = "data.csv";
  link.click();
}

5. Menyimpan Data dengan LocalStorage

Penting agar user tidak kehilangan input saat refresh halaman.

localStorage.setItem("laporan", JSON.stringify(data));

const saved = JSON.parse(localStorage.getItem("laporan"));

6. UI Tombol Export

<button onclick="exportExcel()">Export Excel</button>
<button onclick="exportPDF()">Export PDF</button>
<button onclick="exportJSON(data)">Export JSON</button>
<button onclick="exportCSV(data)">Export CSV</button>

7. Best Practice Sistem Export

• Gunakan nama file otomatis (misal: tanggal-waktu).
• Gunakan library yang stabil seperti SheetJS & html2pdf.
• Jangan export data sebelum divalidasi.
• Gunakan loading indicator saat export file besar.
• Berikan opsi pilihan format file kepada user.

Dengan sistem export data, aplikasi tools UMKM menjadi jauh lebih profesional, memudahkan pengguna membuat laporan, dan mendukung digitalisasi usaha kecil.