Custom PDF Viewer dengan JavaScript
Membuat custom PDF viewer dengan JavaScript memberi Anda kontrol penuh atas tampilan dan fungsionalitas PDF di website Anda. Anda bisa menyesuaikan tampilan, menambahkan fitur interaktif, dan mengintegrasikan dengan sistem backend yang Anda gunakan. Berikut adalah panduan langkah demi langkah untuk membuat custom PDF viewer dengan JavaScript:
1. Pilih Library PDF.js
PDF.js adalah library open-source yang dikembangkan oleh Mozilla yang memungkinkan Anda untuk menampilkan dan berinteraksi dengan file PDF di browser web. Library ini ringan, mudah digunakan, dan menawarkan banyak fitur, termasuk:
- Rendering PDF: PDF.js dapat menampilkan PDF dengan berbagai opsi rendering, seperti single-page, continuous, dan double-page view.
- Navigasi: Anda dapat menggunakan tombol navigasi untuk berpindah halaman, zoom in/out, dan melompat ke halaman tertentu.
- Annotations: PDF.js mendukung berbagai anotasi, seperti highlight, underline, dan strikethrough.
- Search: Anda dapat mencari teks di dalam PDF.
2. Siapkan File HTML
Buat file HTML baru dan tambahkan script PDF.js ke dalam file tersebut. Anda dapat mengunduh PDF.js dari situs web resmi Mozilla.
Custom PDF Viewer
3. Buat Fungsi untuk Memuat PDF
Buat file JavaScript baru dan tulis fungsi untuk memuat PDF ke dalam elemen <div> yang telah dibuat di file HTML.
function loadPDF(url) {
// Buat instance PDF.js
const pdf = new PDFJS.getDocument({ url: url });
// Load file PDF
pdf.promise.then(pdf => {
// Buat instance viewer
const viewer = new PDFJS.PDFViewer({
container: document.getElementById('pdfViewer'),
pdf: pdf,
});
// Render halaman pertama
viewer.renderPage(1);
});
}
// Panggil fungsi loadPDF() dengan URL PDF yang ingin dimuat
loadPDF('path/to/your/pdf.pdf');
4. Tampilkan PDF
Setelah file PDF dimuat, Anda dapat menggunakan metode renderPage() untuk menampilkan halaman tertentu. Anda juga dapat menambahkan tombol navigasi untuk berpindah halaman dan kontrol zoom.
// Fungsi untuk menampilkan halaman tertentu
function showPage(pageNumber) {
viewer.renderPage(pageNumber);
}
// Tombol navigasi
document.getElementById('prevButton').addEventListener('click', () => {
const currentPage = viewer.currentPage;
showPage(currentPage - 1);
});
document.getElementById('nextButton').addEventListener('click', () => {
const currentPage = viewer.currentPage;
showPage(currentPage + 1);
});
5. Sesuaikan Tampilan dan Fungsionalitas
Anda dapat menyesuaikan tampilan PDF viewer dengan CSS dan menambahkan lebih banyak fitur dengan JavaScript. Misalnya, Anda dapat menambahkan tombol untuk pencarian, annotasi, dan berbagai fitur lain.
Contoh Penggunaan:
Custom PDF Viewer
// Fungsi untuk memuat PDF
function loadPDF(url) {
const pdf = new PDFJS.getDocument({ url: url });
pdf.promise.then(pdf => {
const viewer = new PDFJS.PDFViewer({
container: document.getElementById('pdfViewer'),
pdf: pdf,
});
viewer.renderPage(1);
});
}
// Fungsi untuk menampilkan halaman tertentu
function showPage(pageNumber) {
viewer.renderPage(pageNumber);
}
// Tombol navigasi
document.getElementById('prevButton').addEventListener('click', () => {
const currentPage = viewer.currentPage;
showPage(currentPage - 1);
});
document.getElementById('nextButton').addEventListener('click', () => {
const currentPage = viewer.currentPage;
showPage(currentPage + 1);
});
// Panggil fungsi loadPDF() dengan URL PDF yang ingin dimuat
loadPDF('path/to/your/pdf.pdf');
Kesimpulan:
Dengan menggunakan PDF.js dan sedikit JavaScript, Anda dapat membuat custom PDF viewer yang sesuai dengan kebutuhan website Anda. Anda dapat menyesuaikan tampilan, menambahkan fitur interaktif, dan mengintegrasikan viewer dengan sistem backend yang Anda gunakan.