Welcome to PDFTron. This guide will help you integrate a free trial of WebViewer into VueJS applications on the browser. It will help you clone the Vue sample repository, walk through the project structure, and show you how to call other WebViewer API. Your free trial includes unlimited trial usage and support from solution engineers.

Get the Vue sample source code here

linkPrerequisites

• Node.js and npm

linkInitial setup

1. Clone the webviewer-vue-sample repository:

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

2. Enter the directory and run npm install:

   cd webviewer-vue-sample
   npm install

   This will automatically download and extract the PDFTron WebViewer Package.

You are now ready to run the sample or use more WebViewer APIs.

linkSample overview

After initial setup, the webviewer-vue-sample directory should be laid out like this:

webviewer-vue-sample
├── LICENSE
├── package.json
├── package-lock.json
├── README.md
├── CONTRIBUTING.md
├── babel.config.js
├── node_modules
│   ├── ...
├── public  
│   ├── lib
│   │    ├── ...
│   ├── index.html
│   └── favicon.ico
└── src
    ├── assets
    │   ├── ...
    ├── components
    │   └── WebViewer.vue
    ├── App.vue
    └── main.js

Notable files and directories include:

linkRun the sample

1. Run the application by executing:

   npm run serve

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

   Your app should look like this:

   

   Note: If your browser does not open automatically to open the WebViewer, navigate to localhost:8080 to see the project.

linkUse more WebViewer APIs

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:

export default {
  name: 'WebViewer',
  props: {
    path: String,
    url: String
  },
  mounted: function () {
    WebViewer({
      path: this.path,
      initialDoc: this.url, // replace with your own PDF file
    }, this.$refs.viewer).then((instance) => {
      // at this point, the viewer is 'ready'
      // call methods from instance, docViewer and annotManager as needed

      this.docViewer = instance.docViewer;
      this.annotManager = instance.annotManager;

      // you can also access major namespaces from the instance as follows:
      // const Tools = instance.Tools;
      // const Annotations = instance.Annotations;

      // now you can access APIs through `this.instance`

      // or listen to events from the viewer element
      this.docViewer.on('documentLoaded', () => {
         // 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.setTheme('dark');

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

linkNext step

GuidesSamplesAPI docs