Konfigurasi GlobalWorkerOptions.workerSrc pada PDF.js

Definisi dan Fungsi GlobalWorkerOptions.workerSrc

pdfjsLib.GlobalWorkerOptions.workerSrc adalah properti esensial dalam library PDF.js yang berfungsi untuk menentukan lokasi (URL) file pdf.worker.js. Tanpa konfigurasi ini, library tidak dapat melakukan proses rendering dokumen PDF di luar thread utama (web worker), yang berakibat pada kegagalan pemuatan dokumen atau penurunan performa aplikasi secara signifikan.

Implementasi Teknis

Untuk mengintegrasikan PDF.js, Anda wajib mengarahkan workerSrc ke file worker yang sesuai dengan versi library yang digunakan. Berikut adalah sintaks standar untuk implementasi pada aplikasi web:

// Inisialisasi PDF.js worker
import * as pdfjsLib from 'pdfjs-dist';

// Menentukan path ke file worker
pdfjsLib.GlobalWorkerOptions.workerSrc = 'path/to/pdf.worker.js';

// Contoh penggunaan dengan CDN
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

Tabel Komparasi Metode Pemuatan Worker

MetodeKelebihanKekurangan
Lokal (Self-hosted)Kontrol penuh, tidak bergantung pada pihak ketigaMemerlukan manajemen aset statis
CDN (Remote)Implementasi cepat, caching browserBergantung pada ketersediaan server pihak ketiga

Langkah Troubleshooting Umum

  1. Error 404: Pastikan path yang Anda masukkan ke workerSrc benar-benar mengarah ke file pdf.worker.js atau pdf.worker.min.js.
  2. Cross-Origin Policy (CORS): Jika menggunakan CDN, pastikan server mengizinkan akses lintas domain.
  3. Versi Tidak Cocok: Pastikan versi pdfjs-dist (library utama) sama persis dengan versi file pdf.worker.js yang digunakan. Ketidakcocokan versi sering menyebabkan error Worker script does not exist.
  4. Bundler (Webpack/Vite): Jika menggunakan bundler, gunakan plugin seperti worker-loader atau salin file worker ke folder public agar dapat diakses secara statis.

Tips Optimasi

Untuk aplikasi produksi, disarankan menggunakan versi .min.js untuk mengurangi ukuran payload. Jika Anda menggunakan framework seperti React atau Vue, pastikan konfigurasi ini dijalankan sebelum fungsi getDocument dipanggil agar worker siap digunakan saat proses parsing dimulai.