Panduan Lengkap: Kompresi dan Dekompresi File Menggunakan JavaScript (pako.js)

25 Apr, 2025 1 komentar

Pada artikel ini, kita akan membahas secara lengkap cara kerja sebuah aplikasi web sederhana yang dapat melakukan kompresi dan dekompresi file langsung dari browser. Aplikasi ini menggunakan JavaScript, pustaka pako.js, serta HTML dasar untuk antarmuka pengguna.

Tujuan dari aplikasi ini adalah memungkinkan pengguna untuk mengompres file menjadi data biner berbasis base64 yang dapat dengan mudah disimpan atau ditransfer, lalu mendekompresnya kembali menjadi file asli.

Apa itu pako.js?

pako.js adalah pustaka JavaScript yang mengimplementasikan kompresi data menggunakan algoritma GZIP dan deflate. Pako sangat cepat dan sepenuhnya berjalan di sisi klien, sehingga sangat cocok digunakan untuk aplikasi web seperti ini.

Fitur Aplikasi

Aplikasi ini menyediakan dua fungsi utama:

Kompresi File ke Format Biner (Base64)
Dekompresi Biner Menjadi File Asli

Selain itu, ada fitur tambahan untuk menyalin hasil kompresi ke clipboard.

Cara Kerja Aplikasi

1. Kompresi File

Ketika pengguna memilih file dan menekan tombol “Compress to Binary”, fungsi compressFile() akan dijalankan.

Langkah-langkah dalam proses kompresi:

File dibaca menggunakan FileReader sebagai ArrayBuffer.
Buffer tersebut dikonversi menjadi Uint8Array, lalu dikompresi menggunakan pako.gzip().
Hasil kompresi dan nama asli file dikemas menjadi objek JavaScript.
Objek tersebut diubah menjadi string JSON, lalu dikodekan menggunakan base64.
Hasil base64 inilah yang dapat disalin dan digunakan di kemudian hari untuk dekompresi.

Data hasil kompresi ditampilkan di dalam textarea, dan dapat disalin menggunakan tombol “Copy Code”.

2. Dekompresi File

Fungsi decompressFile() digunakan untuk memulihkan file dari string base64 hasil kompresi.

Langkah-langkah dekompresi:

String base64 di-decode menjadi JSON.
JSON diubah menjadi objek yang berisi nama file dan data terkompresi.
Data terkompresi di-dekompresi menggunakan pako.ungzip().
Hasilnya adalah data asli file yang dikemas menjadi Blob.
File dapat langsung diunduh menggunakan tag <a> yang dibuat secara dinamis, dengan nama file asli yang dipulihkan.

Jika terjadi kesalahan saat parsing atau dekompresi, pengguna akan mendapatkan pesan error.

Penjelasan Kode Tambahan

Copy to Clipboard

Fungsi copyToClipboard() memanfaatkan API navigator.clipboard untuk menyalin isi textarea ke clipboard. Fitur ini memudahkan pengguna untuk menyimpan hasil kompresi ke tempat lain atau membagikannya melalui teks.

Kelebihan Aplikasi Ini

Tidak butuh backend: Semua proses kompresi dan dekompresi berjalan di browser.
Aman: File tidak diunggah ke server mana pun.
Mudah digunakan: Antarmuka sederhana, cukup pilih file, klik tombol, dan salin hasilnya.
Mendukung berbagai jenis file: Tidak terbatas pada teks, bisa digunakan untuk gambar, dokumen, atau jenis file lainnya.

Batasan

Ukuran file yang sangat besar dapat membuat browser lambat atau bahkan crash.
Format base64 memang membuat data sedikit lebih besar (sekitar 33% lebih besar dari aslinya).
Kompresi GZIP cocok untuk file teks, tapi mungkin kurang efektif untuk file yang sudah dikompresi seperti gambar JPEG atau video MP4.

Cara Menggunakan

Buka halaman HTML ini di browser.
Pilih file menggunakan tombol file.
Klik Compress to Binary untuk mengompres.
Salin data hasil kompresi atau simpan.
Untuk mendekompres, tempelkan data base64 di bagian bawah, lalu klik Decompress to File.
File akan otomatis terunduh ke komputer Anda.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>File Compression & Decompression</title> <style> body { font-family: sans-serif; padding: 2rem; } h2 { margin-top: 2rem; } input, button { margin: 0.5rem 0; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.0.4/pako.min.js"></script> </head> <body> <h1>📦 File Compression & Decompression</h1> <h2>🪓 Compress File to Binary</h2> <input type="file" id="inputFile" /> <br> <button onclick="compressFile()">Compress to Binary</button> <br><br> <textarea id="compressedData" rows="10" cols="50" readonly></textarea> <br><br>  <button onclick="copyToClipboard()">Copy Code</button> <br><br> <h2>🔧 Decompress Binary to File</h2> <textarea id="binaryDataInput" rows="10" cols="50" placeholder="Paste the compressed binary data here"></textarea> <br> <button onclick="decompressFile()">Decompress to File</button> <script> let originalFileName = ''; function compressFile() { const file = document.getElementById('inputFile').files[0]; if (!file) { alert('Please select a file first!'); return; } originalFileName = file.name; const reader = new FileReader(); reader.onload = function(event) { const fileData = new Uint8Array(event.target.result); const compressedData = pako.gzip(fileData); const fileInfo = { name: originalFileName, data: compressedData }; const base64String = btoa(JSON.stringify(fileInfo)); document.getElementById('compressedData').value = base64String; }; reader.onerror = function() { alert('Error reading the file. Please try again.'); }; reader.readAsArrayBuffer(file); } function decompressFile() { const binaryString = document.getElementById('binaryDataInput').value; if (!binaryString) { alert('Please paste the binary data to decompress!'); return; } try { const decodedString = atob(binaryString); const fileInfo = JSON.parse(decodedString); const decompressedData = pako.ungzip(fileInfo.data); const blob = new Blob([decompressedData]); const fileName = fileInfo.name; const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = fileName; a.click(); } catch (e) { alert('An error occurred while decompressing the data: ' + e); } } function copyToClipboard() { const textArea = document.getElementById('compressedData'); const binaryData = textArea.value; if (binaryData) { navigator.clipboard.writeText(binaryData) .then(() => { alert('Binary data copied to clipboard!'); }) .catch((err) => { alert('Failed to copy text to clipboard: ' + err); }); } else { alert('No data to copy.'); } } </script> </body> </html>

Penutup

Dengan kombinasi HTML, JavaScript, dan pustaka pako.js, kita dapat membangun aplikasi pengelola file ringan dan praktis tanpa perlu server atau backend. Aplikasi ini cocok untuk siapa saja yang ingin belajar tentang pemrosesan file di browser, kompresi data, dan pemanfaatan JavaScript dalam pengembangan web modern.

Aplikasi ini bisa dikembangkan lebih lanjut dengan fitur seperti:

Menyimpan data ke localStorage
Menambahkan enkripsi
Menyediakan opsi format kompresi lain

Semoga panduan ini membantu kamu memahami cara kerja aplikasi ini dan menginspirasi untuk menciptakan alat-alat serupa.

Bangnidd File