Integrating new Angular project with WebViewer JavaScript PDF library

This guide will help you integrate a free trial of WebViewer into Angular applications from scratch. It will help you clone the Angular 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 Angular sample source code here

linkPrerequisites

• Node.js and npm

linkInitial setup

1. Clone the Angular sample by executing

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

2. Once cloned, navigate into the webviewer-angular-sample directory and install all the required dependencies by executing

   npm install

npm will also download the PDFTron WebViewer and extract it to /src/lib.

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

linkSample overview

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

webviewer-angular-sample
├── angular.json
├── CONTRIBUTING.md
├── e2e
├── LICENSE
├── node_modules
│   └── ...
├── package.json
├── README.md
├── src
│    ├── app
│    │   ├── ...
│    │   └── app.component.ts
│    ├── files
│    ├── index.html
│    ├── lib
│    │   ├── ui
│    │   │   ├── ...
│    │   ├── core
│    │   │   ├── ...
│    │   └── webviewer.min.js
│    └── ...
└── ...

Notable files and directories include:

In short, app.component.ts instantiates WebViewer and sets up some example event handlers. WebViewer is presented on the page using the <app-root> router.

linkAssets and scripts

Since this is an Angular project, it is important to pay attention to the bundled files and assets. If you take a peak inside the angular.json file, you'll notice the following lines inside the build options:

{
    //...
    "assets": [
        // existing assets can remain as they are
        "src/lib"
    ],
    "scripts": [
        // other scripts you may have
        "src/lib/webviewer.min.js"
    ]
    //...
}

Please make sure that webviewer.min.js is included in the scripts and also that the lib folder containing the webviewer.min.js file is included in the assets array so that WebViewer can function properly.

linkRun the sample

To run the sample, navigate to your webviewer-angular-sample/ directory and execute

npm start

Then navigate to http://localhost:4200. You should see the application load on your browser. Note it will change in real time if you edit any of the source files.

linkUse more WebViewer APIs

To call more WebViewer API's, navigate to /src/app/app.component.ts and add the API calls in the callback of the WebViewer constructor(you may need to make one if it is not provided).

WebViewer({
    path: '../lib',
    initialDoc: '../files/webviewer-demo-annotated.pdf'
}, this.viewer.nativeElement)
    .then(instance => {
        // In this callback WebViewer will be initialized, so you can call WebViewer API here.
        instance.setTheme('dark');
    });

If your Angular application is already running, you should see the theme change right away. Otherwise execute npm start again, then navigate to http://localhost:4200 and you should see that the theme has changed.

linkNext step

GuidesSamplesAPI docs