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
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.
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
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:
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
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.
If you have any questions about PDFTron's PDF SDK, please feel free to get in touch!