[]
DEMOS DOCS API PRICING
FREE TRIAL
(Showing Draft Content)

Load and View PDF Files in Angular

This tutorial shows how to integrate the Document Solutions for PDF Viewer (DsPdfViewer) into an Angular application. The DsPdfViewer allows users to view and edit PDF content directly in the browser, including PDF forms, and save modified PDF files on the client side.

Feel free to download the completed Angular PDF Viewer sample project to test locally or follow along with the video tutorial below:

Prerequisites

Before you begin, make sure you have the following installed:

  • Node.js (download the latest version from the official Node.js website)

  • Angular CLI (install globally using the following command):

npm install -g @angular/cli

Once your environment is ready, you can create and configure your Angular project.

Create an Angular Project

Open a terminal and run the following commands to create a new Angular application named pdf-viewer-app:

ng new pdf-viewer-app
cd pdf-viewer-app

This will generate the basic Angular project structure with the expected files and folders.

Install the Document Solutions PDF Viewer Package

To add the PDF Viewer to your project, install the @mescius/dspdfviewer package from npm:

npm install @mescius/dspdfviewer

After installation, the library files will be located in:

node_modules/@mescius/dspdfviewer/

Add the PDF Viewer Component to the Angular Application

Open the app.component.html file and add the following element to host the viewer:

<div id="viewer"></div>

Next, open app.component.ts and import the DsPdfViewer component:

import { Component, AfterViewInit } from "@angular/core";
import { DsPdfViewer } from "@mescius/dspdfviewer";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent implements AfterViewInit {
  title = 'pdf-viewer-app';

  ngAfterViewInit() {
    const viewer = new DsPdfViewer("#viewer", {
      workerSrc: "//node_modules/@mescius/dspdfviewer/dspdfviewer.worker.js",
      restoreViewStateOnLoad: false
    });

    viewer.addDefaultPanels();
  }
}

The workerSrc option improves performance when rendering PDFs, and addDefaultPanels() adds the standard toolbar and navigation panels to the viewer.

Update the Angular Configuration

Open angular.json and adjust the following build settings to allow larger file sizes and CommonJS dependencies:

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "8mb",
    "maximumError": "10mb"
  }
],
"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "allowedCommonJsDependencies": [
      "@mescius/dspdfviewer"
    ]
  }
}

These updates ensure that the project can compile successfully with the DsPdfViewer package.

Run the Application

Start the Angular application with the following command:

ng serve --open

Once the project builds, the DsPdfViewer will display as an empty viewer in the browser window.


Load a Local PDF File in an Angular Application

To open a local PDF file, place it in your project folder at src/assets/pdf/newsletter.pdf.

Modify the app.component.ts file to load the PDF automatically when the app starts:

import { Component, AfterViewInit } from "@angular/core";
import { DsPdfViewer } from "@mescius/dspdfviewer";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent implements AfterViewInit {
  title = 'pdf-viewer-app';

  ngAfterViewInit() {
    const viewer = new DsPdfViewer("#viewer", {
      workerSrc: "//node_modules/@mescius/dspdfviewer/dspdfviewer.worker.js",
      restoreViewStateOnLoad: false
    });

    viewer.addDefaultPanels();
    viewer.open("assets/pdf/newsletter.pdf");
  }
}

After running the app, the specified PDF file will open in the viewer window.


The DsPdfViewer also includes an openLocalFile() method that allows users to choose and open a PDF using a file dialog.

Load a PDF from a URL in an Angular Application

To open a PDF from a URL within the same domain, use the open() method and specify the path to the PDF:

viewer.open("/documents-api-pdf/docs/offlinehelp.pdf");

This method is useful when PDFs are stored on your server or within your web application’s resources.


Load a PDF from Another Domain (CORS) in an Angular Application

When trying to open a PDF from a remote domain, the browser may block it due to CORS restrictions. To handle this, DsPdfViewer supports proxy loading using the SupportApi server-side component.

The SupportApi is included with DsPdf and can be hosted in an ASP.NET Core WebAPI project. Once set up, you can reference it in your Angular client and use its CORS proxy feature.

Here’s an example implementation in app.component.ts:

import { Component, AfterViewInit } from "@angular/core";
import { DsPdfViewer } from "@mescius/dspdfviewer";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent implements AfterViewInit {
  title = 'pdf-viewer-app';

  ngAfterViewInit() {
    const viewer = new DsPdfViewer("#viewer", {
      workerSrc: "//node_modules/@mescius/dspdfviewer/dspdfviewer.worker.js",
      restoreViewStateOnLoad: false,
      supportApi: {
        apiUrl: "http://localhost:5004/api/pdf-viewer",
        token: "support-api-demo-net-core-token-2021",
        webSocketUrl: false
      }
    });

    viewer.addDefaultPanels();
    viewer.open("http://localhost:5004/api/pdf-viewer/CorsProxy?url=https://www.africau.edu/images/default/sample.pdf");
  }
}

When you run the application, the viewer will successfully load a remote PDF using the SupportApi proxy.


FAQ

  • Why doesn’t my PDF load when using a URL from another domain?

    Browsers block cross-origin requests without the proper CORS headers. When loading PDFs from external domains, use DsPdfViewer’s supportApi configuration. This proxies the file through your own server (SupportApi), avoiding CORS issues.


  • Does DsPdfViewer support PDF editing or only viewing? 

    DsPdfViewer supports both viewing and editing depending on the PDF content. Users can fill interactive forms, edit annotations, add comments, and save updated PDF files on the client side.


  • Do I need a backend server to load PDFs?

    Not always. The following scenarios outlined below provide more information:

  • Local files: No backend required

  • Local project assets: No backend required

  • Same-domain URLs: No backend required

  • Cross-domain URLs: Backend required (SupportApi proxy)

  • Can DsPdfViewer be used in frameworks other than Angular?

    Yes. DsPdfViewer works with any JavaScript frameworks such as React, Vue, or plain HTML/JavaScript. The API usage is consistent across frameworks.

Next Steps