Integrate WebViewer JavaScript PDF Viewer & Editor into a Vue.js App

This guide will show you how to integrate WebViewer Document Viewer & Editor into a Vue 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.

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 create-vue CLI tool to scaffold our project. Run the tool by running the following command.

1npm create vue@latest

You may be asked if you want to install the create-vue package. In this case, select yes.

Next you will be asked to name your project. You can choose whatever you wish, but for this example we will use webviewer-vue

You will now be asked to select which features to include in your project. For this step, you may choose whatever you wish - your choices will not impact the rest of the steps.

Once you have selected your features and finished running the scaffolding tool, we can install our dependencies by running the following command.

1cd webviewer-vue
2npm install

Now that we have a Vue project to work in, we can install WebViewer.

1npm i @pdftron/webviewer

In addition to installing WebViewer, we will need to set up a script to copy the static WebViewer dependencies into statically served folder in your project (usually public). The reason for this is because WebViewer contains many assets that cannot be bundled by your build system. Instead, these assets need to be served statically.

In package.json we will add a command that copies these static assets to our public folder (or whatever your folder may be called).

1{
2  "scripts": {
3    "copy-webviewer": "mkdir -p ./public/lib/webviewer && cp -a ./node_modules/@pdftron/webviewer/public/* ./public/lib/webviewer",
4    "dev": "npm run copy-webviewer && vite",
5    "build": "npm run copy-webviewer && vite build",
6  }
7}

You'll notice that we also updated our other scripts to run this command first - this is recommended to make sure your WebViewer assets are always in the right place.

Read more about copying WebViewer static assets.

Now that we have WebViewer installed, we are ready to implement it into our app.

For this example we will create a new component for WebViewer. Create a file called components/WebViewer.vue and add the following code:

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      WebViewer({ 
16        path: '/lib/webviewer', 
17        initialDoc: props.initialDoc, 
18        licenseKey: 'YOUR_APRYSE_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>

Notice that the path parameter we pass to the WebViewer constructor points to the same place we copied the static assets to in the previous step.

Now that we have our component, we can use it elsewhere in our app like so.

1<script setup>
2import WebViewer from './components/WebViewer.vue'
3</script>
4
5<template>
6  <WebViewer initialDoc="https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf" />
7</template>
8

That's it! If you run your app, you should see WebViewer mounted with the initial document loaded.