How to integrate WebViewer into a Svelte PDF Viewer

This guide will show you how to integrate WebViewer Document Viewer & Editor into a Svelte application.

You can also download a ready-to-go sample on GitHub.

Prior to starting, you should have already installed Node and npm.

Get your Apryse trial key.

Clone the Svelte sample by executing

1git clone --depth=1 https://github.com/ApryseSDK/webviewer-samples.git
2cd webviewer-samples

Once cloned, navigate into the webviewer-svelte folder and install all the required dependencies by executing

1npm install

npm will also download the Apryse WebViewer and extract it to /public/lib.

To run the sample, navigate to your webviewer-svelte-sample directory and execute

1npm run dev

Then navigate to http://localhost:5000. You should see WebViewer start up and load the sample PDF. Note it will change in real time if you edit any of the source files.

To call more WebViewer API's, navigate to /src/WebViewer.svelte and add the API calls in the callback of the WebViewer constructor(you may need to make one if it is not provided). Add your own license key in place of 'YOUR_LICENSE_KEY'.

1const ele = document.getElementById('viewer');
2window.WebViewer({
3  path: '/lib',
4  licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
5}, ele)
6  .then(instance => {
7    // In this callback WebViewer will be initialized, so you can call WebViewer API here.
8    instance.UI.setTheme('dark');
9  });

1const ele = document.getElementById('viewer');
2window.WebViewer({
3  path: '/lib',
4  licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
5}, ele)
6  .then(instance => {
7    // In this callback WebViewer will be initialized, so you can call WebViewer API here.
8    instance.setTheme('dark');
9  });

If your Svelte application is already running, you should see the theme change right away. Otherwise execute npm run dev again, then navigate to http://localhost:5000 and you should see that the theme has changed.