Building an Angular PDF Viewer with ComPDFKit enhances your web applications by offering robust PDF rendering and manipulation features. In this tutorial series, we'll guide you through integrating ComPDFKit, a powerful JavaScript-based PDF library, with Angular, an open-source JavaScript framework based on TypeScript. Angular's virtual DOM and change detection mechanisms allow for easy expansion and modular design. By following these steps, you'll create a dynamic and responsive PDF viewer. For detailed guidance, refer to the full ComPDFKit for Web documentation. Let's begin building your Angular PDF Viewer with ComPDFKit.

Get Started with Angular

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 for a license online (Free for 30 days).

Make an Angular App With ComPDFKit for Web

Step 1: 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

Step 2: Add ComPDFKit 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 -r ./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": [
  "src/favicon.ico",
  "src/assets",
  "src/webviewer",
]

Step 3: 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

You can see the application running on http://localhost:4200.

License

ComPDFKit for Web supports flexible licensing options. You can apply for a license online to use it, reducing the process of contacting the service team and saving your time. If you need more information, you can contact our sales team. Each license is valid only for the root domain name and any of its subdomains.

Please note that it is not allowed to distribute any documents, sample code, or source code from the ComPDFKit PDF SDK package to third parties.

Final Words

As you've reached this point, you now know how to successfully utilize Angular to build a Web PDF application. If you're eager to delve deeper into the features of ComPDFKit for Web, our rich documentation offers detailed tutorials covering a wide range of functionalities, including data extraction, PDF conversion, and more.

To experience firsthand the robust features and versatility of ComPDFKit for Web, we invite you to try out our Web demo and PDF extraction demo.

Resources & Support

ComPDFKit has a professional R&D team that produces comprehensive technical documentation and guides to help developers. Also, you can get an immediate response when reporting your problems to our support team.

• For detailed information, please visit our Guides page.
• Stay updated with the latest improvements through our Changelog.
• For technical assistance, please reach out to our Technical Support.
• To get more details and an accurate quote, please contact our Sales Team.