Section:

Integrate WebViewer into a Svelte Project

WebViewer is implemented in a Svelte file and imported into main App.svelte file. The component is able to view, annotate, and manipulate PDFs and other documents.

WebViewer provides a slick out-of-the-box responsive UI that enables you to view, annotate and manipulate PDFs and other document types inside any web project.

Once you generate your license key, it will automatically be included in your sample code below.

License Key

Click the button below to view the full project in GitHub.

1<script>
2
3  import { onMount, createEventDispatcher } from 'svelte';
4  import WebViewer from '@pdftron/webviewer';
5
6  let instance = null;
7  const dispatch = createEventDispatcher();
8
9	onMount(async () => {
10		const ele = document.getElementById('viewer');
11		WebViewer({
12      path: '/lib/webviewer',
13			licenseKey: 'YOUR_LICENSE_KEY',
14			initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
15		}, ele).then(instance => {
16			dispatch('ready', {
17				instance
18			})
19		})
20	});
21
22</script>
23
24<style>
25	#viewer {
26		width: 100%;
27		height: 100vh;
28	}
29</style>
30
31<div id='viewer'>
32
33</div>
34

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales