Angular file viewer: Display PDFs, images, and Office files

An Angular file viewer can display PDFs, images, and Office documents in one interface. Nutrient Web SDK renders PDFs and converts supported Office files to PDF in the browser before displaying them. This tutorial uses a DOCX file; the same viewer can open other supported file types.

For a Word-only integration, follow the Angular DOCX viewer tutorial. For PDF-only applications, compare the options in our Angular PDF viewer guide. You can also try the Office viewer demo before integrating the SDK.

Before you start

• Install Node.js and Angular CLI using the Angular setup guide(opens in a new tab). Use a Node.js version supported by your Angular version.
• Use a browser-rendered Angular application for this example. An application with server-side rendering needs a separate browser-only initialization path.
• Have a DOCX, PDF, or supported image available to serve from your application.
• Check that your Nutrient trial or license includes Office document viewing. Additional editing features depend on your licensed components.

Which files can the viewer open?

The standalone Web SDK supports PDF and PNG, JPEG, and TIFF images. It also supports Word formats such as DOC and DOCX, Excel formats such as XLS and XLSX, and PowerPoint formats such as PPT and PPTX. Refer to the file type support guide for the full list and for formats that require Document Engine.

Nutrient supports the following file formats:

• PDF, PDF/A (1, 2, 3)
• DOCX, DOC, DOTX, DOCM
• XLSX, XLS, XLSM
• PPTX, PPT, PPTM
• TIFF, TIF (including multipage)
• PNG, JPEG, JPG

Office-to-PDF conversion runs in the browser without installing Microsoft Office or LibreOffice. The viewer displays the converted PDF. PDF annotations or content edits don’t directly edit the original Word, Excel, or PowerPoint file.

Create the Angular application

The following steps create a new Angular project and install Nutrient Web SDK.

Creating a new Angular project

First, create a new Angular project for the Nutrient integration:

ng new nutrient-file-viewer

Choose CSS, no routing, and no server-side rendering (SSR) if prompted. Current Angular CLI defaults to standalone components and the app.ts, app.html, and app.css filenames used below. See the Angular project-creation reference(opens in a new tab). Change to the project directory:

cd nutrient-file-viewer

Adding Nutrient

Install @nutrient-sdk/viewer as a dependency with npm or yarn:

npm install @nutrient-sdk/viewer

yarn add @nutrient-sdk/viewer

The example loads runtime assets from Nutrient’s content delivery network (CDN) with useCDN: true. Keep Angular’s default public asset entry in angular.json; there’s no need to copy SDK assets from node_modules. To serve the runtime assets from your own domain, follow the self-hosting guide and use its baseUrl configuration instead.

Displaying a document

1. Add your document to the public directory as document.docx. You can use our demo document as an example.

2. Replace the contents of src/app/app.html with the following:

   <div class="app">
     <div class="toolbar">
       <img class="logo" src="favicon.ico" height="32" alt="" />
   
       Nutrient Angular Application
     </div>
   
     <!-- We'll mount the Nutrient UI to this element. -->
     <div #viewerContainer class="nutrient-container"></div>
   </div>

3. Replace the contents of src/app/app.ts with the following:

import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";

@Component({
  selector: "app-root",
  standalone: true,
  templateUrl: "./app.html",
  styleUrls: ["./app.css"],
})
export class App implements AfterViewInit, OnDestroy {
  @ViewChild("viewerContainer")
  private viewerContainer!: ElementRef<HTMLDivElement>;
  private destroyed = false;
  private sdk?: typeof import("@nutrient-sdk/viewer")["default"];

  ngAfterViewInit(): void {
    void this.loadViewer();
  }

  private async loadViewer(): Promise<void> {
    try {
      const { default: NutrientViewer } = await import("@nutrient-sdk/viewer");
      if (this.destroyed) return;
      this.sdk = NutrientViewer;

      const configuration = {
        useCDN: true,
        document: new URL("document.docx", document.baseURI).href,
        container: this.viewerContainer.nativeElement,
        // licenseKey: "YOUR_LICENSE_KEY", // Add your trial or production key.
      };
      await NutrientViewer.preloadWorker(configuration);
      if (this.destroyed) return;

      const instance = await NutrientViewer.load(configuration);
      // Loading may finish after Angular removes this component.
      if (this.destroyed) NutrientViewer.unload(instance);
    } catch (error: unknown) {
      if (!this.destroyed) console.error("Unable to load the document", error);
    }
  }

  ngOnDestroy(): void {
    this.destroyed = true;
    if (this.viewerContainer) {
      this.sdk?.unload(this.viewerContainer.nativeElement);
    }
  }
}

The dynamic import keeps the SDK in a separate lazy chunk, outside Angular’s initial bundle budget. The component preloads the conversion worker before opening the document and checks whether it has been destroyed after each asynchronous step.

Uncomment licenseKey and supply a trial or production key that enables the features you’re evaluating. Follow the Web SDK getting-started guide for trial setup and the licensing guide for deployment requirements.

The SDK needs a container with a defined height. Before starting the app, add the following styles to the src/app/app.css file:

:host {
  height: 100%;
}

.app {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.toolbar {
  position: relative;
  display: flex;
  align-items: center;
  height: 64px;
  width: 100%;
  padding: 0 24px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  font-family: sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
}

.logo {
  margin-right: 20px;
}

.nutrient-container {
  height: calc(100% - 64px);
}

Start the app and open it in your default browser:

npm start

yarn start

A note about fonts

Office conversion substitutes fonts that are unavailable to the SDK. Substitution can change line breaks and pagination, so check the converted document with your own files. For closer matching, provide appropriately licensed font files using the custom font setup guide.

Adding even more capabilities

After the document loads, you can add annotations, signatures, page manipulation, or PDF content editing, depending on your licensed components. These operations apply to the PDF representation. Use the following guides to choose the capabilities your application needs:

• Instant synchronization
• Document assembly
• Page manipulation
• Editor
• Forms
• Signatures
• Redaction
• Document security

Conclusion

The viewer can use one interface for PDF, Office, and image files. Test your source documents, fonts, and required editing features in the Office viewer demo. Then use the Web SDK getting started guide to evaluate Nutrient in your application.

Related reading

• How to build a PowerPoint viewer in JavaScript — Display PPT/PPTX files in the browser with Nutrient
• Open Excel files in the browser using JavaScript — Handle XLS and XLSX files without MS Office
• How to build a React Word viewer — Display DOC/DOCX files in React applications
• Angular PDF viewer — For PDF-only viewing in Angular (Nutrient, PDF.js, or ng2-pdf-viewer)
• Document viewer for web apps — Compare React, Vue, and Angular viewer options side by side
• Top five document viewers for developers — Compare DOCX and PDF viewer libraries side by side

FAQ