Using the Search API in Adobe PDF Embed API
Adobe PDF Embed API is a free JavaScript library that allows you to embed PDFs quickly and easily in web applications with only a few lines of code. In just a few simple steps using the online demo, you can configure a viewer with the options you want like the view mode and whether the PDF can be downloaded, then generate the code for you to paste directly into your web page.
But what if you want to configure the viewer even further? For example, what if you want to capture the terms that users search for in the document or show a different set of tools on the toolbar. PDF Embed API can be configured to suppress aspects of the native user interface while retaining the APIs necessary to replace that functionality with your own. In this article, we will discuss how to do this with the native search tool. In a future article, we will cover the annotation tools.
You can see a working example at this CodePen.
In this example, we use PDF Embed API to display the PDF file but we have added my own search UI to the top of the page. The Search API provides the same functionality as the native search tool but because we are controlling the interface, we can capture more information than if the user were to search using the standard UI.
The first step is to enable the Search API. You do this by adding the property `enableSearchAPIs` to the viewer options that you pass to `AdobeDC.View.previewFile()` and setting it to “true.”
Note: The Search API and the search tool are different. By enabling Search API, you automatically suppress the display of the search tool. This is a good approach because having both available can create confusion for end-users.
Now the native search tool is disabled, there is no actual way to execute a search. Let’s add that now. We want to recreate the functionality that the native search tool has but customize it. We want to:
- Can execute a search
- Allow users to move to the next and previous hits in the search results
- Clear the search results to reset the search results object we use to navigate the results in the document.
In the code below, you will see an example. The key to programmatically jumping between the next and previous items in the search results is in the `onResultsUpdate` callback.
The “onResultsUpdate” callback function will be triggered every time a search operation takes place through the search API. The result will automatically be highlighted in the PDF and the callback will receive a JSON object that includes information for the current page number, current search result index, and the total number of search results. This information can then be used to update the search UI.
Final thoughts
The code above is just enough to reproduce the functionality of the native search tool but by replacing the tool with your own UI, you can add additional code to perform other functions and collect more analytics about how the user is navigating your file. Adobe PDF Embed API is part of Adobe Document Services API, which also allows you to do a variety of other automated document actions like Document Generation, Create PDFs, OCR (Optical Character Recognition), and many other services. Go here to learn more about Adobe Document Services and get started using them in your own projects.
