In this blog, we'll show you how to add accurate, reliable, and fast support for Microsoft® Office formats to an Angular project using 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 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:

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.

linkStep 1 - Get Your Trial Key

You will first need to sign up for a free trial (to get the demo key needed in step 3).

linkStep 2 - 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.

linkStep 3 - 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 https://github.com/PDFTron/webviewer-angular-sample.git
cd webviewer-angular-sample
npm install

Then, when prompted, input your trial key.

linkStep 4 - 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.

linkStep 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.

linkConclusion

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!