The textSearchInit API allows for more advanced search functionality, since it gives you the location and contents of all search results.
With these search results, you can do things such as add annotations to each search result. The properties of search search result are documented here
Add a highlight annotation to each search result
This example searches the PDF and adds a highlight annotation to each result.
This can be altered to add other kinds of annotations, such as Rectangles, Underlines, etc.
WebViewer(
{ ...options },
document.getElementById('viewer')
).then(instance => {
const { docViewer, CoreControls, annotManager, Annotations } = instance;
docViewer.on('documentLoaded', () => {
// Set search modes. See the API reference for more information
const searchMode = CoreControls.Search.Mode.PAGE_STOP | CoreControls.Search.Mode.HIGHLIGHT;;
const searchOptions = {
fullSearch: true // search the full document,
onResult: (result) => {
if (result.resultCode === CoreControls.Search.ResultCode.FOUND) {
if (!result.quads.length) return;
console.log(result);
const textQuad = result.quads[0].getPoints();
const annot = new Annotations.TextHighlightAnnotation();
annot.X = textQuad.x1;
annot.Width = textQuad.x2 - textQuad.x1;
annot.PageNumber = result.pageNum;
annot.Y = textQuad.y3;
annot.Height = textQuad.y1 - textQuad.y3;
annot.FillColor = new Annotations.Color(0, 0, 255, 0.5);
annot.StrokeColor = new Annotations.Color(0, 0, 255, 0.5);
annot.Quads = [textQuad];
annotManager.addAnnotation(annot);
annotManager.drawAnnotationsFromList([annot])
}
}
}
// start the search
docViewer.textSearchInit('YOUR_SEARCH_HERE', searchMode, searchOptions);
})
})
WebViewer(
{ ...options },
document.getElementById('viewer')
).then(instance => {
const {
documentViewer,
Core,
annotationManager,
Annotations
} = instance.Core;
documentViewer.addEventListener('documentLoaded', () => {
// Set search modes. See the API reference for more information
const searchMode = Core.Search.Mode.PAGE_STOP | Core.Search.Mode.HIGHLIGHT;;
const searchOptions = {
fullSearch: true // search the full document,
onResult: (result) => {
if (result.resultCode === Core.Search.ResultCode.FOUND) {
if (!result.quads.length) return;
console.log(result);
const textQuad = result.quads[0].getPoints();
const annot = new Annotations.TextHighlightAnnotation();
annot.X = textQuad.x1;
annot.Width = textQuad.x2 - textQuad.x1;
annot.PageNumber = result.pageNum;
annot.Y = textQuad.y3;
annot.Height = textQuad.y1 - textQuad.y3;
annot.FillColor = new Annotations.Color(0, 0, 255, 0.5);
annot.StrokeColor = new Annotations.Color(0, 0, 255, 0.5);
annot.Quads = [textQuad];
annotationManager.addAnnotation(annot);
annotationManager.drawAnnotationsFromList([annot])
}
}
}
// start the search
documentViewer.textSearchInit('YOUR_SEARCH_HERE', searchMode, searchOptions);
})
})
