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 watch a step-by-step video to help you get started.

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.

Clone the webviewer-vue-sample repository:

git clone https://github.com/ApryseSDK/webviewer-vue-sample.git

Enter the directory and run npm install:

cd webviewer-vue-sample
npm install

This will automatically download and extract the Apryse WebViewer Package.

Run the application by executing:

npm 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':

export default {
  name: 'WebViewer',
  props: {
    path: String,
    url: String
  },
  mounted: function () {
    WebViewer({
      path: this.path,
      licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
      initialDoc: this.url, // replace with your own PDF file
    }, this.$refs.viewer).then((instance) => {
      // at this point, the viewer is 'ready'
      const { Core, UI } = instance;
      const { documentViewer, annotationManager, Annotations, Tools } = Core;

      // See https://docs.apryse.com/web/guides/ for more info.
      documentViewer.addEventListener('documentLoaded', function() {
          // call methods relating to the loaded document
      });
    });
  }
}

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

instance.UI.setTheme('dark');

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