How to Display Microsoft Office Files in Angular

By Apryse | 2019 Apr 17

2 min

Tags

office

view

angular

tutorial

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

Want to see a guide on converting Office documents? Click here.

There are no server dependencies, Microsoft Office licenses, or third-party software required. WebViewer uses the Office PDF SDK to directly convert DOCX, XLSX, and PPTX files client-side using JavaScript, then rendering them for viewing.

To see what we'll build, check out the Microsoft Office viewer demo. (Open 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:

Cross-platform Office PDF SDK and PDF viewer that works and looks the same on different devices.

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.

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

Step 1: Initial Project Setup

Copied to clipboard

This project was generated with Angular CLI version 7.0.3. For more information, visit Angular - Getting Started.

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

Step 2: Install the Git Repository

Copied to clipboard

After the initial set up, you must clone the Git repo and install it. Enter the following into the command line to do this:

git clone https://github.com/PDFTron/webviewer-angular-sample.git
cd webviewer-angular-sample
npm install

Step 3: Start NPM

Copied to clipboard

Once installed, start NPM:

npm start

Now you can 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 to use, so you can customize and manipulate documents in many ways. To customize the UI, view the UI customization guide.

Step 4: Build the Project

Copied to clipboard

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

Copied to clipboard

Adding an Office PDF SDK to work with your document viewer in an Angular project is straightforward with Apryse 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 Apryse's PDF SDK, please get in touch!