By default, HTML5 compatible PDF Viewer will be used if user consumes the service using a modern web browser or a mobile device.

Otherwise, e.g. for IE 9 and older, the server will build a new PDF on-the-fly, burning highlights into the PDF and return it for showing in browser’s default PDF viewer.

The Highlighter JS attaches to all PDF links in the web page and takes the query for highlighting from the page element identified by the querySelector option.

<script src="/highlighter/js/pdf-highlighter.min.js"></script>
<script>
  pdfHighlighter.initPdfHighlighter({
    highlighterUrl: '/highlighter/',
    querySelector: 'input[type=search]'
  });
</script>

The Highlighter Lightbox is an advanced integration script able to show highlighted PDF in a lightbox, without user leaving the current page. In addition, it can attach to PDF links added dynamically, after the page was loaded.

The Lightbox always opens the PDF in the web based viewer.

Live demo:

• Highlight query house OR "rabbit hole" box and machine in Alice's Adventures in Wonderland

<link rel="stylesheet" href="/highlighter/js/pdf-highlighter-lightbox.css">
<script src="/highlighter/js/pdf-highlighter-lightbox.js"></script>
<script>
  pdfHighlighter.initPdfHighlighterLightbox({
    highlighterUrl: '/highlighter/',
    dynamicAttach: true
  });
</script>

In general case, you'll have user provided keywords for which you're showing the search results. The Lightbox and Highlighter JS can pick up the query string from the search box or other page element, as pointed by the `querySelector` option. Alternatively, add search keywords as `data-query` attribute to a parent HTML element wrapping the search results.

<div id="searchResults" data-query='"rabbit hole"'>
  <a href="/foo/bar/file.pdf" class="resultItem">Some found document</a>
  ...
</div>

The query may contain the complete search string including phrases (in quotes) and Boolean operators.

Live demo:

• Highlight query house OR "rabbit hole" box and machine in Alice's Adventures in Wonderland

<div id="searchResults" data-query='house OR "rabbit hole" box and machine'>
  <a href="/foo/bar/file.pdf" class="resultItem">Some found document</a>
  ...
</div>

If your search engine is able to generate highlighting files compatible with Adobe’s PDF Highlight File Format, that’s the feature you should definitely use. JObjects Highlighter can use this as an input and will highlight the exact terms found by your search engine.

Older versions of Adobe Reader (before v10) would highlight PDF accepting highlights file location specified as xml parameter after the hash. Adobe has dropped support for highlighting since but many search solutions still use this URL format.

/example/document.pdf#xml=/example/test.xml

JObjects Highlighter integration scripts recognize these URLs automatically and transforms them to go through Highlighter’s highlight-for-xml service.

Live demo:

• Single page document
• Multi page document

Alternatively, the highlight file location can be specified using data-xml attribute.

<a href="/foo/bar/file.pdf" data-xml="/service/returning/highlights.xml" 
   class="resultItem">Found document</a>