FoxitPDFSDK for Web Example - Angular.js

This guide shows two examples for angular. One introduces how to quickly run the out-of-the-box sample in FoxitPDFSDK for Web package, and the other presents a way to integrate FoxitPDFSDK for Web into an exiting Angular/cli app.

Quickly run the out-of-the-box example for Angular

This example is built for @angular/cli app.

Prerequisites

• Nodejs and npm
• FoxitPDFSDK for Web

Getting started

First clone the repository to any location:

git clone https://github.com/foxitsoftware/FoxitPDFSDKForWeb-Angular-Example.git

Enter ./FoxitPDFSDKForWeb-Angular-Example and execute:

cd ./FoxitPDFSDKForWeb-Angular-Example
npm i

This step will download all dependencies into node_modules folder.

Besides, to correctly reference your fonts lib, duplicate the external folder inside SDK to src/assets.

Runnning the example

On the shell, execute the following command to start your application:

npm start

Now you are ready to launch the app. Open your browser, navigate to <http://localhost:4200> to load your example.

Integrate FoxitPDFSDK for Web into existing Angular project

This integration assumes you have @Angular/cli app installed.

Prerequisites

• Nodejs and npm
• @angular/cli
• FoxitPDFSDKforWeb

Basic setup

1. Generating and serving an Angular project via a development server

  ng new my-angular-app
  cd my-angular-app

Let's call the root folder of your exiting project as AngularJS and FoxitPDFSDK for Web as SDK.

1. Install the lattest version of @foxitsoftware/foxit-pdf-sdk-for-web-library.

  npm i -S @foxitsoftware/foxit-pdf-sdk-for-web-library

Inside AngularJS, implement the following:

1. In the angular.json, update architect/build options of assets,styles and extractCss, and architect/lint section.

   {
     ...
     "build": {
       "assets": [
         ...,
         {
            "glob": "**/*",
            "input": "node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/lib",
            "output": "/foxit-lib",
            "ignore": ["PDFViewCtrl.js", "PDFViewCtrl.{vendor,polyfills}.js", "UIExtension.*"]
         }
       ],
      "styles": [
          "node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.css",
          "src/styles.css"
        ]
        ...
     }
   }

Creating components

1. In AngularJS, run

   ng generate component PDFViewer

   This step will create pdfviewerfolder and related component files under AngularJS/src/app. Now, you need to implement the followings in AngularJS/src/app/.

2. Place the license-key.js into src/app/pdfviewer/. You can find the license information at SDK/examples/.

3. Update src/app/pdfviewer/pdfviewer.component.ts. For configuration details, refer to the counterpart file inside SDK.

4. Update src/app/app.component.html to pass a DOM element for placing web viewer.

   <div>
     <app-foxitpdfviewer
       #pdfviewer
       id="pdf-ui"
       class="foxit-pdf-viewer-container"
     ></app-foxitpdfviewer>
   </div>

5. Update app.component.css to make it look as what you preferred

.foxit-pdf-viewer-container {
  display: block;
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
}
.foxit-pdf-viewer-app {
  position: absolute;
  width: 100%;
  height: 100%;
}

Reference fonts lib

If some text in a PDF document requires a specified font to be rendered correctly, you need to specify a font loading path during initialization. In this example, you can refer to the fontPath configuration in src/app/pdfviewer/pdfviewer.component.ts. What we need to do is to copy the external folder in the SDK to the src/assets folder so that the special font can be rendered normally.

Referencing Addons

If you are integrating FoxitPDFSDK for Web into your existing Angular project, you should read this section before continue. You may want to check out Addons for detailed introductions.

Here we introduce three ways to reference SDK addons for Angular project, you may choose one of them based on your needs. This [Comparison](#Addons reference methods comparison) will help you to better understand the difference of the three ways and make a choice. If you need to run multiple instances, see the second method.

1. Reference fragmented addons

This method was used by default in past versions before version 7.2. You should open pdfviewer.component.ts, write the addons under ngOnInit() as shown below:

ngOnInit(){
this.pdfui = new UIExtension.PDFUI({
    addons: [
        the_path_to_foxit_lib + '/uix-addons/file-property/addon.info.json',
        the_path_to_foxit_lib + '/uix-addons/full-screen/addon.info.json',
        // .etc
    ],
    // other options
});
}

Where the_path_to_foxit_lib is the SDK lib folder，the path depends on the assets configuration of angular.json. For details, check out Basic Setup.

2. Reference allInOne.js

The allInOne.js already combines all addons, that locates in node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/uix-addons/. To refenece this file, open pdfviewer.component.ts, and update the code as follows:

// ...
import * as UIExtension from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.full.js';
import * as Addons from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/allInOne.js';
// ...

Under the ngOnInit(), pass Addons to PDFUI:

this.pdfui = new UIExtension.PDFUI({
    addons: Addons,
    // other options
});

Comparions of addons reference methods

Referene method	Configuration	HTTP Requests	Modifiable (e.g Localization resoures, and addon.info.json)
Fragmentized	No	n+	Yes
Modularized	Configure gulp	0	Yes,but should re-merge the addons after modification
allInOne.js	No	1	No

Note: You can rebuild allInOne.js by using our Addons merge tools

Reference the Service-Worker-Allowed HTTP header

Starting from FoxitPDFSDK for Web version 10.0.0, since service worker is used, it is necessary to add this field in the HTTP response header of the Service Worker script. Its value is the maximum allowed scope path:

Service-Worker-Allowed /;

Nginx

If you are using Nginx as your server, you can add the Service-Worker-Allowed response header by modifying the Nginx configuration file. Below is an example configuration：

server {
    location /sw.js {
        add_header Service-Worker-Allowed /;
    }
}

Dev Server

In local development, you can add Service-Worker-Allowed response headers to projects.websdk-angular-boilerplate.architect.serve.options in angular.json file. The following is a configuration example：

{
   "headers": {
      "Service-Worker-Allowed": "/"
   }
}

Running your Application

On the Shell, run

npm start

Awsome, all are made ready. In your browser, go to http://localhost:4200 to load your application.

Notice

Angular 9.0.0 and the later version modified the default tsconfig.json configuration: strict=true, you should add the following parameters in tsconfig.json to make the example run correctly:

"compilerOptions": {
  "allowJs": true,
  "allowSyntheticDefaultImports": true,
  "noImplicitAny": false,
}

For more information, check out: angular/angular#34798 and the changelog: https://github.com/angular/angular/blob/master/CHANGELOG.md#user-content-900-2020-02-06