In this blog, we'll show you how to add accurate, reliable, and fast support for Microsoft® Office formats to an Angular project using PDFTron’s WebViewer, a [JavaScript PDF Viewer}(/webviewer/).

There are no server dependencies, MS Office licenses, or third party software required. WebViewer will directly convert DOCX, XLSX, and PPTX files client-side using JavaScript, and then render them for viewing.

Check out a MS Office viewer demo of what we'll be building. (Try opening a local file to see it in action -- or pick one of the samples.)

The source code for this Angular project is available in our Git repo. Here's what it looks like:

Angular Office Document Viewer

Beyond just viewing Office documents, WebViewer supports additional functionality, such as pure client-side annotation , editing , manipulation , redaction , forms , and much more . It can also be connected to a backend to enable real-time collaboration .

PDF, JPG and PNG file types are also supported pure client-side, while 30+ additional formats (including CAD) are available when WebViewer is augmented with our server SDKs.

Step 1 - Initial Setup

This project was generated with Angular CLI version 7.0.3. See Angular - Getting Started for more information.

Before you begin, make sure your development environment includes Node.js.

Step 2 - Install

Once you're set up, the next step is to clone the Git repo and install it. This can be done by entering the following into the command line:

git clone
cd webviewer-angular-sample
npm install

Step 3 - Run

Once installed, start NPM:

npm start

You can now navigate to http://localhost:4200/ to view the Angular app. The app will automatically reload if you change any of the source files.

The default document displayed in the viewer will be a PDF file. You can change this to an Office file by updating the following line in webviewer.component.ts:

initialDoc: '../files/my-office-document.docx',

And that's it! Your app now has Office viewing and annotation capabilities.

You can refer to Getting Started with PDFNetJS Full for more information.

The WebViewer UI is highly configurable and comes with a rich set of APIs which allows you to customize and manipulate documents in many ways. If you'd like to customize the UI, check out the UI customization guide .

Step 5 - Build

To build the project, run npm run build. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.


Adding an Office document viewer to your Angular project is straightforward with WebViewer, a JavaScript-based PDF library. You can find the source code for this blog post at Github.

Check out our online demo or try it free .

If you have any questions about PDFTron's PDF SDK, please feel free to get in touch !