Get started with Apryse WebViewer SDK in a Svelte Project

The WebViewer SDK is expansive, allowing you to do the following with PDFs inside your app:

• View
• Edit
• Annotate
• Flatten
• Extract
• Search
• Build forms
• Calculate using measurements
• Support layers
• Customize the UI
• Meet global accessibility standards through the UI
• Page manipulation
• Compare different versions of a PDF
• Archive
• Use digital signature
• Redact
• Generate templates
• Add security
• Document conversion, including Office and CAD conversion

You can also:

• View and edit in Spreadsheet Editor for .xlsx files.
• View and edit in DOCX Editor for .docx files.

Adding WebViewer to your application allows users to use PDFs, .xlsx, and .docx files without going outside of your application. This reduces reliance on third-party systems, multiple vendors, and file downloads for everyday tasks without compromising control, compliance, or security.

Interact with our showcase demo to test out all of the Apryse WebViewer SDK functionality.

This guide walks you through how to integrate the WebViewer SDK into your Svelte application. By the end, you'll be able to render a PDF document in the UI.

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

Prior to starting, you should:

• Install Node and npm to use as your run-time environment and package manager.
• Open a text editor like Visual Studio Code.
• Get your Apryse trial key.

This video teaches you the fundamentals of installing and initializing the Apryse WebViewer SDK in any web application. If you wish, you may skip this section and proceed to the steps below.

Scaffold your Svelte project.

1. On the command line, cd to where you want your new project to sit.

2. Run the following on the command line to generate a project, replacing <project-name> with the name of your project:

1npx sv create <project-name>

3. You may be asked if you want to install the svelte package. In this case, select yes.

4. Next, complete the following tasks from the command line during project creation:

a. Choose SvelteKit minimal as your template.

b. Choose Yes, using JavaScript with JSDoc comments for type checking.

c. Choose nothing to add nothing to your project.

d. Choose npm for the package manager that you'll install dependencies with.

You could, of course, select whatever configurations you like for your project. The selections above are what was used in writing this guide.

Enter the following on the command line to navigate into your new project, replacing <project-name> with the name of your project:

1cd <project-name>

From your project directory on the command line, install WebViewer into your project:

1npm i @pdftron/webviewer

You have to copy the static assets required for WebViewer to run. The files must be moved into a location that will be served and publicly accessible.

1. Via your text editor, create a subfolder within the existing static folder in your project and name it lib/webviewer.

2. Next, copy specific static assets required for WebViewer. The static folders and file to copy are located in node_modules/@pdftron/webviewer/public in your project and are as follows:

• core
• ui
• webviewer.mn.js

3. Paste the select folders you copied to the new lib/webviewer location that will be served.

Alternatively, you can read more about copying WebViewer static assets to automate the process.

Now that you've installed WebViewer, you'll implement it into your app.

1. Create a file within the src folder called src/WebViewer.svelte. This will be your WebViewer component that you'll use elsewhere in your app.
2. Add the following code to src/WebViewer.svelte, keeping the following in mind:
   1. path is the path to the copied static assets.
   2. An initial PDF document is specified to open when WebViewer starts using the initialDoc parameter.
   3. Add your own license key in place of 'YOUR_LICENSE_KEY'. If you've created your license key and you're logged in, your key is already in the code below.

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

3. Add the following code to the src/routes/+page.svelte file to implement the component:

1<script>
2	import WebViewer from '../WebViewer.svelte';
3</script>
4
5<WebViewer />

After you've saved all of the files, you'll serve the webpage so you can see the WebViewer UI and the PDF you included to open in WebViewer.

1. Run the following command on the command line from your project directory to run the project:

1npm run dev

2. Click the localhost link created in your terminal to view the WebViewer UI and PDF file locally.