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.

Clone the webviewer-samples repository:

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

Next, navigate into the Vue sample folder and run npm install:

1cd webviewer-vue
2npm install

This will automatically download and extract the Apryse WebViewer Package.

Run the application by executing:

1npm run serve

Then open a browser and go to localhost:8080 to see the application.

To call more WebViewer APIs, open /www/js/index.js in your favorite text editor and add the API calls to the callback for the WebViewer instantiation. Add your own license key in place of 'YOUR_LICENSE_KEY':

1export default {
2  name: 'WebViewer',
3  props: {
4    path: String,
5    url: String
6  },
7  mounted: function () {
8    WebViewer({
9      path: this.path,
10      licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
11      initialDoc: this.url, // replace with your own PDF file
12    }, this.$refs.viewer).then((instance) => {
13      // at this point, the viewer is 'ready'
14      const { Core, UI } = instance;
15      const { documentViewer, annotationManager, Annotations, Tools } = Core;
16
17      // See https://docs.apryse.com/web/guides/ for more info.
18      documentViewer.addEventListener('documentLoaded', function() {
19          // call methods relating to the loaded document
20      });
21    });
22  }
23}

1export default {
2  name: 'WebViewer',
3  props: {
4    path: String,
5    url: String
6  },
7  mounted: function () {
8    WebViewer({
9      path: this.path,
10      initialDoc: this.url, // replace with your own PDF file
11    }, this.$refs.viewer).then((instance) => {
12      // at this point, the viewer is 'ready'
13      // call methods from instance, docViewer and annotManager as needed
14
15      this.docViewer = instance.docViewer;
16      this.annotManager = instance.annotManager;
17
18      // you can also access major namespaces from the instance as follows:
19      // const Tools = instance.Tools;
20      // const Annotations = instance.Annotations;
21
22      // now you can access APIs through `this.instance`
23
24      // or listen to events from the viewer element
25      this.docViewer.on('documentLoaded', () => {
26         // call methods relating to the loaded document
27      });
28    });
29  }
30}

For example, if you want to change the theme of the WebViewer to dark mode, you would add the following:

1instance.UI.setTheme('dark');

1instance.setTheme('dark');

Execute npm run serve again and the theme of the viewer will change.