Integrate WebViewer with Vite

This guide will show you how to integrate WebViewer into an application powered by Vite.

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

Get your Apryse trial key.

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

We will use the Vite CLI to generate our project for us.

First, run the following command and follow the prompts.

1npm create vite@latest

You can choose any framework you wish. You may also choose to use JavaScript or Typescript.

Now, navigate into your newly created project and run npm install to install Vite dependencies.

1cd {your_project_name}
2npm install

Next we will install WebViewer and a plugin called vite-plugin-static-copy which we will use to copy WebViewer's static assets into our public folder.

1npm i @pdftron/webviewer vite-plugin-static-copy

We will use both these dependencies no matter what framework you are using.

WebViewer comes with many static assets (such as Web Assembly Modules) that cannot be bundled directly by Vite. Instead, these static assets need to be served from the filesystem.

To do this, we must copy these static WebViewer assets into the public folder created by Vite.

We will use the vite-plugin-static-copy plugin we installed earlier.

In vite.config, we we will add viteStaticCopy plugin to the plugins array like so:

1import { defineConfig } from 'vite'
2import react from '@vitejs/plugin-react'
3import { viteStaticCopy } from 'vite-plugin-static-copy'
4
5// https://vite.dev/config/
6export default defineConfig({
7  plugins: [react(), viteStaticCopy({
8    targets: [
9      {
10        src: 'node_modules/@pdftron/webviewer/public/*',
11        dest: 'webviewer'
12      }
13    ]
14  })],
15})

If you are using a different framework than React, your config file might look slightly different. What's important is that we are adding the viteStaticCopy plugin to the plugins array.

1import { defineConfig } from 'vite'
2import { viteStaticCopy } from 'vite-plugin-static-copy'
3
4// https://vite.dev/config/
5export default defineConfig({
6  plugins: [viteStaticCopy({
7    targets: [
8      {
9        src: 'node_modules/@pdftron/webviewer/public/*',
10        dest: 'webviewer'
11      }
12    ]
13  })],
14})
15

Now all our configuration is done and we are ready to start using WebViewer.

Initialization will vary depending on your framework, but in general the process is as follows:

1. Import WebViewer
2. Create a DOM element to mount WebViewer to
3. Call the WebViewer constructor and provide the DOM element you want to mount it to and the path to your static WebViewer assets we copied in the previous step

Below are some examples of what this could look like in different frameworks:

1import WebViewer from "@pdftron/webviewer";
2import { useEffect, useRef } from "react";
3
4export default function WebViewerComponent() {
5
6  const ref = useRef(null);
7
8  useEffect(() => {
9    WebViewer({
10      path: '/webviewer',
11      licenseKey: 'YOUR_LICENSE_KEY',
12    }, ref.current)
13      .then((instance) => {
14        // Use WebViewer APIs here
15      })
16  }, [])
17
18  return (
19    <div ref={ref} style={{ height: '100%' }}>
20
21    </div>
22  )
23}

1import './App.css'
2import WebViewerComponent from './WebViewer'
3
4function App() {
5
6  return (
7    <div>
8      <WebViewerComponent />
9    </div>
10  )
11}
12
13export default App
14

1import WebViewer from '@pdftron/webviewer'
2import './style.css'
3
4WebViewer({
5  path: '/webviewer',
6  licenseKey: 'YOUR_LICENSE_KEY',
7}, document.getElementById('app'))
8 .then(instance => {
9
10 })

1<template>
2  <div id="webviewer" ref="viewer"></div>
3</template>
4
5<script>
6import { ref, onMounted } from 'vue';
7import WebViewer from '@pdftron/webviewer';
8
9export default {
10  name: 'WebViewer',
11  props: { initialDoc: { type: String } },
12  setup(props) {
13    const viewer = ref(null);
14    onMounted(() => {
15      const path = `${import.meta.env.BASE_URL}webviewer`;
16      WebViewer({ 
17        path, 
18        licenseKey: 'your_license_key'
19      }, viewer.value).then(
20        (instance) => {
21          
22        }
23      );
24    });
25    return {
26      viewer,
27    };
28  },
29};
30</script>
31
32<style>
33#webviewer {
34  height: 100vh;
35}
36</style>

1<script>
2  import { onMount } from 'svelte';
3  import WebViewer from '@pdftron/webviewer';
4
5	onMount(async () => {
6		const ele = document.getElementById('viewer');
7	  WebViewer({
8      path: '/webviewer'
9		}, ele).then(instance => {
10			
11		})
12	});
13</script>
14
15<style>
16	#viewer {
17		width: 100%;
18	}
19</style>
20
21<div id='viewer' style="height: 100vh;">
22
23</div>

1<script lang="ts">
2  import WebViewer from './lib/WebViewer.svelte'
3</script>
4
5<WebViewer />

You should now be able to run your app and see WebViewer mounted on the page!

• Using the WebViewer API
• Loading a document