Get Started with Apryse WebViewer SDK in a Vue.js Project

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

• View
• Annotate
• Flatten
• Extract
• Search
• Build forms
• Calculate using measurements
• Support layers
• Customize the UI
• Meet global accessibility standards through the UI

You can also take advantage of our add-on packages for further capabilities.

Adding WebViewer to your application allows users to use PDFs 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 Vue.js project. 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.

Before you start:

• 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 Vue.js 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:

1npm create vue@latest

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

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

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

a. Change the default project name to a project name of your choice. We'll use webviewer-vue in this example.

b. Choose features to include in your project.

c. Choose experimental features to include in your project.

d. Choose yes to skip all example code and start with a blank Vue project.

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, run the following command to install your dependencies:

1npm install

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 public 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 public 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 new components folder within the src folder of your project.
2. Create a new file named WebViewer.vue within the components folder.
3. Add the following code to the WebViewer.vue file, noting that:
   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<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: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf', 
18        licenseKey: 'YOURLICENSE_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>

4. Add the following code to the src/app.vue file to import the component and use it elsewhere in your app:

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

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.