In this blog, we'll show how to view Microsoft Office files in Angular using the PDFTron WebViewer. This includes accurate, reliable, and fast support for Microsoft Word, Excel, and PowerPoint formats using WebViewer, a JavaScript PDF Viewer .

There are no server dependencies, Microsoft Office licenses, or third-party software required. PDFTron WebViewer directly converts DOCX, XLSX, and PPTX files client-side using JavaScript, and then renders them for viewing.

Check out a Microsoft Office viewer demo of what we'll build. (Try opening a local file to see it in action -- or pick a sample.)

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 also connects 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. To do this, enter the following into the command line:

git clone https://github.com/PDFTron/webviewer-angular-sample.git
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 automatically reloads if you change any of the source files.

The default document displayed in the viewer is a PDF file. To change this to an Office file, update the following line in webviewer.component.ts:

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

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

Refer to Getting Started with PDFNetJS Full for more information.

The WebViewer UI is highly configurable and comes with a rich set of APIs that allow you to customize and manipulate documents in many ways. To customize the UI, check out the UI customization guide .

Step 5 - Build

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

Conclusion

Adding an Office document viewer to your Angular project is straightforward with PDFTron WebViewer, a JavaScript-based PDF library. 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 get in touch !