WebViewer.js Samples
The following examples show features with the easy-to-use WebViewer.js API. WebViewer.js takes account of all document rendering engines and provides elegant fallbacks when features are not supported by the browser technology.
This sample shows how to use the WebViewer.js controller (JavaScript API) to create an instance of WebViewer with custom controls.
This sample shows how to WebViewer handles user permissions for annotations.
When an annotation user is set, the client-side end users can only modify annotations that were created by them.
Users can also be given administrative access, which allows modifications to annotations created by any users.
Lastly, WebViewer can also be loaded in read-only mode, which allows existing annotations to be displayed but users will not be allowed to create new annotations.
This sample shows how WebViewer can be hosted on a different server than the actual documents.
Here, the document files are fetched from Amazon S3.
The server hosting the files must support CORS.
Note that on IE9, CORS is not supported. You can use the xdomain library to work around this.
HTML5 Samples
The following examples show features specific to the HTML5 WebViewer. Please ensure your browser supports HTML5 (IE9+, Firefox, Chrome,etc.)
This sample shows how layers within a PDF can be displayed and toggled in WebViewer.
Source: config.js
This sample shows how a local PDF file can be selected from a file picker and displayed in WebViewer. Also note the download button which allows the document to be downloaded along with all the annotations that have been added.
This sample shows how to customize the signature tool. It draws a custom background on the signature menu and then saves and loads the default signature from localStorage.
Source: config.js
This sample shows how annotations from specific users can be hidden and shown. This could allow you to only display annotations from the current user for example.
Source: config.js
This sample shows how to get the positions of characters on a page. It then adds highlight annotations over instances of the word WebViewer.
Source: config.js
This sample shows how to create a custom display mode by overriding display mode functions. The sample creates a basic horizontal layout.
Source: config.js
This sample demonstrates the different form actions that are supported by WebViewer. Actions should be added to fields in the PDF document.
This sample shows how to use HTML5's application cache with WebViewer's offline mode to download documents and then view them offline.
Source: offline-sample.appcache
This sample shows how the HTML5 WebViewer can be integrated with the deck.js project to create a slideshow from a document. Please note that there were some customizations done to the scale extension.
This sample shows how page text can be loaded to create a basic accessible document viewer. Only the document's text is displayed, with headings for each page.
This sample shows how the HTML5 WebViewer supports internationalization. Additional custom translations can be easily added by copying and modifying the English translation json file.
Source: config.js
This sample shows how the HTML5 WebViewer can be modified to display documents in a flipbook style. Place your mouse near a page corner and then click and drag to change pages. Note that this sample shows how the core document viewing component can be used outside of WebViewer.js and any UI controls would have to be implemented independently.
This 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 (among others).
By default, all WebViewer annotations are compatible with PDF annotations and vice versa (WebViewer annotations can be imported from and exported to the XFDF XML format).
This sample shows how the HTML5 WebViewer can be extended with custom annotations and tools via the Annotation Framework. A custom tool is added to the annotation panel to create a diamond annotation. The sample source file diamond.js includes code that defines the appearance of the annotation, as well as the selection box and control handle behaviors.
Source: diamond.js
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
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
This sample 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.
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.
Native Application Integration
This sample shows how to integrate the HTML5 WebViewer with Cordova (PhoneGap) to allow you to create native applications. You can find instructions on how to set it up in the README.txt file in the sample folder.
Cordova Resources:
Documentation
This sample shows how to integrate the HTML5 WebViewer in a native WinRT application. The WebViewer is packaged directly in the WinRT application, where it can be loaded by the WebView control. Using a custom JavaScript part retriever, the WebViewer is able to load XOD documents from the local file system.
WinRT Resources:
Getting started
This sample shows how to integrate the HTML5 WebViewer in a native iOS application. The WebViewer is packaged directly in the iOS application, where it can be loaded by the UIWebView control. Using a custom JavaScript part retriever, the WebViewer is able to communicate with Objective-C and load XOD documents from the local file system.
iOS Resources:
Getting started
This sample shows how to integrate WebViewer.js in a native Android application. The WebViewer is packaged directly as an asset in an Android application, where it can be loaded by the WebView control. Using a custom ContentProvider, the WebViewer is able to load XOD documents from the local file system.
Android Resources:
Getting started
Tip: create a new Android project from existing sources from the WebViewer/samples/android folder.