Demos - pdf-viewer

Basic Usage

A simple viewer with default settings. Just set the src attribute.

<pdf-viewer src="document.pdf" style="height: 500px"></pdf-viewer>

With Thumbnails

Add show-thumbnails to display a sidebar with page previews.

<pdf-viewer src="document.pdf" show-thumbnails style="height: 500px"></pdf-viewer>

Continuous Scroll

Set view="continuous" to scroll through all pages.

<pdf-viewer src="document.pdf" view="continuous" style="height: 500px"></pdf-viewer>

External Document

A real-world PDF loaded into the viewer with thumbnails enabled.

<pdf-viewer src="report.pdf" show-thumbnails title="Report" style="height: 600px"></pdf-viewer>

Dark Mode

Set mode="dark" or let it auto-detect from the page theme.

<pdf-viewer src="document.pdf" mode="dark" style="height: 500px"></pdf-viewer>

Restricted Controls

Use no-download and no-print to hide those buttons.

<pdf-viewer src="document.pdf" no-download no-print style="height: 500px"></pdf-viewer>

Custom Zoom

Set an initial zoom level with the zoom attribute.

<pdf-viewer src="document.pdf" zoom="1.5" style="height: 500px"></pdf-viewer>

Specific Page + Title

Jump to a specific page on load and display a title in the toolbar.

<pdf-viewer src="document.pdf" page="3" title="Zoom Controls" style="height: 500px"></pdf-viewer>

No Toolbar

Hide the toolbar entirely with show-toolbar="false".

<pdf-viewer src="document.pdf" show-toolbar="false" style="height: 400px"></pdf-viewer>

Browse & View

Pick a PDF from your computer to view it right here. You can also drag and drop onto the viewer.

<button onclick="document.querySelector('pdf-viewer').openFile()"> Browse for PDF... </button> <pdf-viewer id="viewer" style="height: 600px"></pdf-viewer>

Programmatic Search

Use the search() method or press Ctrl+F to find text within the document.

const viewer = document.querySelector('pdf-viewer') await viewer.search('Hello World')

Event Handling

Listen for events to integrate the viewer into your application.

const viewer = document.querySelector('pdf-viewer') viewer.addEventListener('pdf-loaded', (e) => { console.log('Loaded:', e.detail.pageCount, 'pages') }) viewer.addEventListener('page-change', (e) => { console.log('Page:', e.detail.page, 'of', e.detail.pageCount) }) viewer.addEventListener('zoom-change', (e) => { console.log('Zoom:', e.detail.zoom) })

Interactive Demos