You can customize the WebViewer interface using JQuery methods. WebViewer control adds JQuery library in page scripts. Use the code in this walkthrough to add a button on the toolbar and add a client side PDF export implementation.
When you complete this walkthrough you get a WebViewer that looks similar to the following at run time.
In the Source view of the WebForm.aspx file, add the following code.
Add this code after the <head> tag |
Copy Code
|
---|---|
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> |
The HTML WebViewer is created using the MVVM pattern that provides a view model which does not depend on the UI. The code can access the Viewer's view model and bind the custom UI to it by using well-documented properties and methods. For MVVM support, the code can use knockout.js which is the standard MVVM library for JavaScript. Knockout.js provides declarative bindings, observable objects and collections in HTML markup. See Using Javascript with the HTML Viewer for more information.
Follow the steps below to access the ViewModel.
Paste the code into .aspx source |
Copy Code
|
---|---|
<script> <body onload="document_onload()"> |
Paste the code into .aspx source |
Copy Code
|
---|---|
function viewer_loaded() { |
Paste the code into .aspx source |
Copy Code
|
---|---|
function document_onload() { $('#WebViewer1').ready(viewer_loaded); }; |
In the Source view of the WebForms.aspx file, add the following Javascript code inside the viewer_loaded event handler to access the WebViewer toolbar. Lets add the custom button in the toolbar - an export button and add PDF export functionality to it.
Paste the code into .aspx source |
Copy Code
|
---|---|
function viewer_loaded() { |
The complete code for WebForm1.aspx in the Source view is as shown:
Paste the code into .aspx source |
Copy Code
|
---|---|
|
Paste the code into .aspx source |
Copy Code
|
---|---|
function viewer_loaded() { |
Note: