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.

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

<script>

  import { onMount, createEventDispatcher } from 'svelte';
  import WebViewer from '@pdftron/webviewer';

  let instance = null;
  const dispatch = createEventDispatcher();

	onMount(async () => {
		const ele = document.getElementById('viewer');
		WebViewer({
      path: '/lib/webviewer',
			licenseKey: 'YOUR_LICENSE_KEY',
			initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
		}, ele).then(instance => {
			dispatch('ready', {
				instance
			})
		})
	});

</script>

<style>
	#viewer {
		width: 100%;
		height: 100vh;
	}
</style>

<div id='viewer'>

</div>

View the full sample on GitHub