There are no server dependencies, Microsoft Office licenses, or third-party software required. PDFTron WebViewer directly converts
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:
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 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
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:
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
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.
If you have any questions about PDFTron's PDF SDK, please get in touch !