How to Make a Angular App With ComPDF for Web

Prerequisites

To get started, you'll need:

• The latest stable version of Node.js.
• A package manager compatible with npm(8.5.0 or later).
• Apply the License Key: Contact ComPDFKit's sales team to get a free 30-day license to test the project.

Create a New Project

1. Create a new Angular project:

npm init @angular compdfkit-app

When prompted to make a choice, press Enter to accept the default option.

2. Change your directory to compdfkit-app:

cd compdfkit-app

Add ComPDF for Web

1. Install webviewer as a dependency with npm:

npm i @compdfkit_pdf_sdk/webviewer --save

2. Add the "webviewer" folder that contains the required static resource files to run the ComPDFKit Web demo, to your project’s public resource folder.The folder you need to copy is node_modules/@compdfkit_pdf_sdk/webviewer/dist.

cp -a ./node_modules/@compdfkit_pdf_sdk/webviewer/dist/. ./src/webviewer

3. Add the following to your angular.json file. Angular will copy the ComPDFKit library assets to the assets directory before running your app:

"assets": [
  // ...others
  "src/webviewer",
]

Display a PDF

1. Add the PDF document you want to display to the src/webviewer/example directory. You can use our demo document as an example.

2. Replace the contents of app.component.html with:

<div #viewer class="viewer"></div>

3. When using the Web SDK, you need to use the path parameter to tell it where the copied static resources are located, if not, they will be relative to the current path.

Replace the contents of app.component.ts with:

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { RouterOutlet } from '@angular/router';
// @ts-ignore
import WebViewer from '@compdfkit_pdf_sdk/webviewer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements AfterViewInit{
  @ViewChild('viewer') viewer!: ElementRef;

  ngAfterViewInit(): void {
    let docViewer: any;
    WebViewer.init({
      path: '/',
      pdfUrl: '/webviewer/example/developer_guide_web.pdf',
      license: '<Input your license here>'
    }, this.viewer.nativeElement).then((instance: any) => {
      docViewer = instance.docViewer;

      docViewer.addEvent('documentloaded', async () => {
        console.log('document loaded');
      })
    })
  }
}

4. Add the following styles to the src/app/app.component.css file:

.viewer { width: 100vw; height: 100vh; }

5. Start the app and open it in your default browser:

npm start