This guide will help you integrate PDF.js Express Viewer 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 herePrerequisites
Initial setup
Clone the
pdfjs-express-viewer-vue-samplerepository:git clone https://github.com/pdfjs-express/pdfjs-express-viewer-vue-sampleEnter the directory and run npm install:
cd pdfjs-express-viewer-vue-sample npm installThis will automatically download and extract the PDF.js Express Viewer Package.
You are now ready to run the sample or use more WebViewer APIs.
Sample overview
After initial setup, the pdfjs-express-viewer-vue-sample directory should be laid out like this:
pdfjs-express-viewer-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/Folder | Description |
|---|---|
| LICENSE | Lists the copyright and license information. |
| package.json | Lists the manifest of the project and contains the author/version metadata. |
| public | Contains 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. |
| src | Contains all the JavaScript files and assets for the VueJS project |
| src/App.js | Contains 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.vue | This is where the PDF.js Express WebViewer API calls are placed once the component is mounted. |
Run the sample
Run the application by executing:
npm run serveThen open a browser and go to
localhost:8080to see the application.Your app should look like this:
Note: If your browser does not open automatically to open the WebViewer, navigate to
localhost:8080to 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'
// now you can access APIs through the WebViewer instance
const { Core } = instance;
// adding an event listener for when a document is loaded
Core.documentViewer.addEventListener('documentLoaded', () => {
console.log('document loaded');
});
// adding an event listener for when the page number has changed
Core.documentViewer.addEventListener('pageNumberUpdated', (pageNumber) => {
console.log(`Page number is: ${pageNumber}`);
});
});
}
}
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'
// now you can access APIs through the WebViewer instance
const { Core } = instance;
// adding an event listener for when a document is loaded
Core.documentViewer.addEventListener('documentLoaded', () => {
console.log('document loaded');
});
// adding an event listener for when the page number has changed
Core.documentViewer.addEventListener('pageNumberUpdated', (pageNumber) => {
console.log(`Page number is: ${pageNumber}`);
});
});
}
}
For example, if you want to change the theme of the WebViewer to dark mode, you would add the following:
instance.UI.setTheme('dark');
instance.UI.setTheme('dark');
Execute npm run serve again and the theme of the viewer will change.
