WebViewer.js Sample

WebViewer Universal

This sample shows how to use WebViewer.js to create a universal WebViewer control. WebViewer.js detects the user's browser environment and automatically determines the best viewing technology.

HTML5 Samples

The following examples show features specific to the HTML5 WebViewer. Please ensure your browser supports HTML5 (IE9+, Firefox, Chrome,etc.)

Annotation Support

The sample shows the HTML5 WebViewer's out-of-the-box support for annotations. WebViewer supports the creation of many annotation types, such as: line, ellipse, text highlight and underline.


See mobile version

Form Support

This sample shows how the HTML5 WebViewer supports PDF form actions. Form submit actions can be directly to a server from the WebViewer. To see it live, fill in some data in the text boxes and click submit at the bottom of the document.
Compare with the original file: form1.pdf


See mobile version

Customization: UI Controls

This sample show how the HTML5 WebViewer can be customized in a clean and simple manner. Through an external configuration script that can be loaded at run-time, the WebViewer's theme, branding, or even default behaviors can be changed.


Source: config.js

Customization: Theme

This sample shows how to apply a different CSS skin to the HTML5 WebViewer. The default HTML5 WebViewer is styled with a custom jQuery UI theme, but it can be easily swapped for another theme. By using the run-time configuration file loading mechanism, changing the theme is as simple as defining a path to the new css file.


Source: config.js
Tip: roll your own theme with jQuery UI ThemeRoller

Encryption Support

This samples shows the HTML5 WebViewer loading an encrypted XOD document. This WebViewer loads a custom configuration file that includes a handler for decrypting encrypted XOD files.
To create an encrypted document, convert the XOD document with the parameter "--xod_encrypt_password".
e.g. docpub test.pdf -f xod --xod_encrypt_password mypassword
Download the XOD document loaded by the viewer, see that the content is encrypted: encrypted.xod
The password for this sample is foobar.


Source: config.js
Tip: for added security, obfuscate the code for the decryption handler. Please note that because this is client-side decryption, there is no way to ensure 100% security.

Offline Mode

This sample shows how a document can downloaded for offline viewing. Once the download button is clicked, the xod document will be downloaded and saved within the browser's internal database. Offline viewing mode can be turned on once the xod document has finished downloading.


See mobile version