Kebutuhan untuk merender dokumen seperti PDF, Microsoft Word (DOCX), dan teks biasa langsung di dalam antarmuka web tanpa mengunduhnya kian meningkat. Membangun Custom Document Viewer Component memberikan kontrol penuh terhadap UI/UX, keamanan dokumen, serta integrasi fitur tambahan seperti anotasi, tanda tangan digital, atau pencarian teks.
Pendekatan paling efisien adalah memanfaatkan pustaka inti JavaScript yang andal untuk parsing dokumen, lalu membungkusnya ke dalam komponen modular di framework modern seperti React, Vue, atau Angular. Pendekatan ini memastikan performa rendering tetap optimal sekaligus menjaga ukuran bundle aplikasi agar tidak membengkak.
Arsitektur dan Pemilihan Pustaka Inti
Sebelum menulis kode komponen, Anda memerlukan pustaka (library) yang bertugas membaca format file biner. Pemilihan pustaka sangat bergantung pada jenis dokumen yang ingin didukung oleh aplikasi Anda.
| Format Dokumen | Pustaka Rekomendasi | Ukuran Bundle | Kelebihan Utama |
|---|---|---|---|
| react-pdf / PDF.js | Sedang | Render berbasis Canvas/SVG, mendukung teks selektif | |
| DOCX / Word | docx-preview | Kecil-Sedang | Konversi langsung ke elemen HTML di DOM |
| Teks / Markdown | Prism.js / marked | Kecil | Sangat cepat, mendukung syntax highlighting |
| Universal (Multi) | PDF.js + Mammoth.js | Besar | Mendukung hampir semua dokumen perkantoran umum |
Implementasi Kode: Custom PDF Viewer (React)
Berikut adalah contoh implementasi komponen penampil dokumen PDF kustom menggunakan pustaka react-pdf yang digabungkan dengan kontrol navigasi halaman dan fungsi zoom manual.
import React, { useState } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
// Konfigurasi Worker PDF.js
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
export default function CustomDocViewer({ fileUrl }) {
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);
const [scale, setScale] = useState(1.0);
function onDocumentLoadSuccess({ numPages }) {
setNumPages(numPages);
setPageNumber(1);
}
return (
Halaman {pageNumber} dari {numPages}
);
}Langkah Teknis Integrasi dan Optimasi
Agar komponen penampil dokumen Anda berjalan mulus di berbagai perangkat, perhatikan langkah-langkah teknis optimasi berikut:
- Atur Worker secara Eksternal: Untuk PDF.js, pastikan file worker dimuat melalui CDN atau di-host terpisah agar tidak membebani thread utama JavaScript saat memproses dokumen berukuran besar.
- Terapkan Lazy Loading & Virtualization: Jika dokumen memiliki ratusan halaman, gunakan teknik virtualisasi daftar (seperti
react-window) agar hanya halaman yang tampil di layar (viewport) saja yang dirender ke DOM. - Tangani Error dan Loading State: Selalu sediakan komponen fallback atau spinner saat dokumen sedang diunduh dari server, serta pesan penanganan galat (error handling) jika tautan file korup atau tidak ditemukan.
- Keamanan Akses Dokumen: Jika dokumen bersifat privat, pastikan URL file menggunakan token otorisasi sementara atau di-streaming melalui blob URL terenkripsi.
Troubleshooting Masalah Umum
Kendala yang sering ditemui saat membangun document viewer kustom biasanya berkaitan dengan CORS (Cross-Origin Resource Sharing) atau kegagalan worker PDF.js. Pastikan server penyimpanan dokumen mengizinkan header akses dari domain frontend Anda. Jika teks pada PDF terlihat pecah, pastikan penggunaan skala rendering disesuaikan dengan pixel ratio layar perangkat pengguna (Retina display support).