3 Cara Menampilkan PDF Kedalam Situs WordPress Kita

Ini 3 cara untuk menampilkan PDF secara keseluruhan (all pages) kedalam postingan atau page atau situs Wordcodess kita.

3 Cara Menampilkan PDF Kedalam Situs Wordcodess

1. Iframe
2. Menggunakan javascript
3. Menggunakan layanan online converter

1. Menggunakan Iframe

Untuk menampilkan PDF kedalam post menggunakan iframe ikuti contoh code dibawah ini:

2. Menggunakan Javascript Library

Salah satu Javascript library yang tekenal untuk menampilkan (render) PDF adalah PDF.js.

function register_my_menu() {
    register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action('init', 'register_my_menu');

PDF.js adalah open source library javascript untuk menampilkan dan memanipulasi (customize) PDF langsung kedalam web browser.

Untuk menggunakan PDF.js Anda harus menyertakan library ini kedalam tag HTML Anda lalu membuat instance ‘PDFViewe’ object. Contoh:

<!-- Include the PDF.js library -->
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.7.7/build/pdf.min.js"></script>

<!-- Create a container element for the PDF viewer -->
<div id="pdfViewer"></div>

<script>
// Initialize the PDF viewer
const pdfViewer = new PDFJS.PDFViewer({
container: document.getElementById('pdfViewer'),
});

// Load a PDF file
PDFJS.getDocument('https://example.com/path/to/document.pdf').then(function(pdf) {
// Display the PDF file in the viewer
pdfViewer.setDocument(pdf);
});
</script>

Anda dapat menyesuaikan tampilan dan perilaku penampil PDF dengan menyetel berbagai opsi di konstruktor PDFViewer. Misalnya, Anda dapat menyetel opsi halaman untuk menentukan halaman awal yang akan ditampilkan, atau opsi defaultZoomValue untuk menentukan tingkat zoom default.

Klik link ini untuk melihat contohnya.

3. Menggunakan Converter PDF to HTML