Select a product

PDF.js Express Free Viewerplay_arrow

Professional PDF.js Viewing - Free

PDF.js Express Plusplay_arrow

Professional PDF.js Viewing & Annotations - Try for free

Get Started

play_arrow

PDF.js Express Viewer

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Searching

play_arrow

Measurement

play_arrow

Compare

play_arrow

Advanced Capabilities

play_arrow

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Integrating PDF.js Express Plus with Vue.js

Welcome to PDF.js Express. This guide will help you integrate a free trial of PDF.js Express 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

Prerequisites

Node.js is not required for PDF.js Express
PDF.js Express does not require Node, npm, or node_modules. It is only recommended to run the samples.
No trial license key required.
The trial of PDF.js Express SDK works without a license key. A commercial license key is required for use in a production environment. Please purchase a license key if you do not have one.

Initial setup

  1. Clone the pdfjs-express-vue-sample repository:

    git clone https://github.com/pdfjs-express/pdfjs-express-vue-sample
    
  2. Enter the directory and run npm install:

    cd pdfjs-express-vue-sample
    npm install
    

    This will automatically download and extract the PDF.js Express Package.

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

Sample overview

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

pdfjs-express-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:

File/FolderDescription
LICENSELists the copyright and license information.
package.jsonLists the manifest of the project and contains the author/version metadata.
publicContains the static index.html page that is loaded onto the browser and all other resources for the VueJS project including the icon. This is also where the PDF.js Express Webviewer lib is extracted to when you run npm install.
srcContains all the JavaScript files and assets for the VueJS project
src/App.jsContains the App component which imports the WebViewer.vue component, adds styling and places it on the HTML page using a <div> tag.
src/components/WebViewer.vueThis is where the PDF.js Express WebViewer API calls are placed once the component is mounted.

Run 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:

    Vue WebViewer Sample

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

Use 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: () => {
    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
      });
    });
  }
}
export default {
  name: 'WebViewer',
  props: {
    path: String,
    url: String
  },
  mounted: () => {
    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, documentViewer and annotationManager as needed

      this.docViewer = instance.Core.documentViewer;
      this.annotManager = instance.Core.annotationManager;

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

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

      // or listen to events from the viewer element
      this.docViewer.addEventListener('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');
instance.UI.setTheme('dark');

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

Vue Sample Dark

Next step

GuidesSamplesAPI docs