How do I display server-side search highlights in the WebViewer?

[Support]

Q:  We need to: 

1. Search and Highlight multiple statements in the PDF document (which we will only get at the time of display)

2. Serve that document in the browser (assume inside the web viewer), embedded in our Java (GWT) based application across all browsers Ie8+, Chrome, Safari and Firefox

3. Upon the user selecting a statement in another window in the browser app, take the viewing page on Webviewer to that location in the document where that statement was highlighted.

 

When googling for help we found this thread to be useful: https://groups.google.com/forum/?fromgroups=#!topic/pdfnet-webviewer/ueciMP-iWnY

 

---------------

A:

 

From what you are describing, the best solution to convert directly to XOD and let theWebViewer do the highlighting on the client side (e.g. via highlight text annotation).

 

The HTML5 WebViewer comes with an annotation framework that supports PDF annotations. This means that you can create PDF annotations directly on the client-side as well as on the server side. You can also save/load annotations to/from your server.

 

For a quick demo see: http://www.pdftron.com/pdfnet/webviewer/demo/html5/ReaderControl.html?a=1&did=sample01&d=../samples/files/java.xod&config=../samples/annotation/config.js

 

(On the left panel, go to the 4th tab for annotations. You can create annotations directly here. If you select the annotation from the list, it will jump to the page it is on)

 

With annotations enabled, you can create annotations on the client-side, and then export your annotations as .xfdf (an xml-based format for PDF annotations). The .xfdf can be sent to your server  to be saved. (and loaded back later if needed)

 

If you need to create annotations on the server-side. You can use PDFNet SDK to open original PDF, search for text, and create annotations. Then yuo can use doc.SaveAsXFDF() - there is no need to save the PDF since you such want to create XFDF. The WebViewer can load the exported .XFDF directly (using "serverUrl").

 

In WebViewer package, we have included a sample PHP script is called annotationHandler.php, that shows how to save and load annotations from a PHP server. The sample code saves POST requests to xfdf, and returns xfdf on GET requests. 

So if your server is in java, you will have to create a new jsp script that does the same thing. Then in WebViewer.js, set the "serverUrl" properly to your new .jsp script for handling annotations)

Once you have created/imported annotations into WebViewer, you can use the annotation manager to select the annotation programmatically.  When you use annotationManager.SelectAnnotation(annotation), the WebViewer will jump to page the annotation is on. You may want to take a look at WebViewer/html5/AnnotationPanel.js to see how this is being used.

To recap:

 

1. Loading the document in PDFDoc object.

2. Converting that into XOD.

3. Searching through the PDFDoc to find the highlighted quads.

4. Add annotations using Highlight class

5. Save annotations information in the XFDF document.

6. Load XFDF file in WebViewer.

7. Jump to the annotated/highlighted statement.

Please take a look at the Developer's guide that is included in the WebViewer package for details on how to setup and use the annotation framework.