Search results

Customize the text search color

26 Nov 2021 / 1 minute to read

The PDF Viewer library allows you to customize the color of the search text in the loaded PDF Document using the following properties of TextSearchColorSettings modules.

Step 1: Follow the steps provided in the link to create simple PDF Viewer sample.

Step 2: Add the following code snippet to customize the text search color.

Copied to clipboard
<button id="search">SearchText</button>
<button id="searchNext">SearchNext</button>
<button id="searchPervious">searchPervious</button>
<button id="searchCancel">CancelSearch</button>
Copied to clipboard
viewer.enableTextSearch = true;
// customize the textSeach color
viewer.textSearchColorSettings.searchColor = 'Blue';
viewer.textSearchColorSettings.searchHighlightColor ='Red';
document.getElementById('search').addEventListener('click', ()=> {
   viewer.textSearchModule.searchText('pdf',false);
});
document.getElementById('searchNext').addEventListener('click', ()=> {
   viewer.textSearchModule.searchNext();
});
document.getElementById('searchPervious').addEventListener('click', ()=> {
   viewer.textSearchModule.searchPrevious();
});
document.getElementById('searchCancel').addEventListener('click', ()=> {
   viewer.textSearchModule.cancelTextSearch();
});

Find the Sample how to customize the text search color