Pre-Purchase Insights: Everything you need to know before you buy.
By Apryse | 2019 Apr 17
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
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:
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.
PNG file types are supported pure client-side, while 30+ additional formats (including CAD) are available when WebViewer is augmented with our server SDKs.
Before you begin, make sure your development environment includes Node.js.
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
Once installed, start NPM:
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
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.
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.