Section:

Integrate WebViewer JavaScript PDF Viewer & Editor into an Angular App

Integrating new Angular project with WebViewer JavaScript PDF library

This guide will show you how to integrate WebViewer Document Viewer & Editor into an Angular 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.

If you're looking for an AngularJS / Angular 1.x guide or clone GitHub Sample. Otherwise, continue with the rest of this guide for Angular 2+.

Prerequisites

Prior to starting, you should have already installed Node and npm.

Get your Apryse trial key.

License Key

Apryse collects some data regarding your usage of the SDK for product improvement.

If you wish to continue without data collection, contact us and we will email you a no-tracking trial key for you to get started.

Get Started with the Sample

1. Initial setup

Clone the Angular sample by executing

sh

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

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

sh

1npm install

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

Assets and scripts

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

JSON

1{
2    //...
3    "assets": [
4        // existing assets can remain as they are
5        "src/lib"
6    ],
7    "scripts": [
8        // other scripts you may have
9        "src/lib/webviewer.min.js"
10    ]
11    //...
12}

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.

2. Run the sample

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

sh

1npm 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.

3. Usage

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). Add your own license key in place of 'YOUR_LICENSE_KEY'.

1WebViewer({
2    path: '../lib',
3    licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
4    initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf'
5}, this.viewer.nativeElement)
6    .then(instance => {
7        // In this callback WebViewer will be initialized, so you can call WebViewer API here.
8        instance.UI.setTheme('dark');
9    });

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.

Next step

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales