PDF.js Express provides a few different search APIs depending on your use case.
Searching a document one by one
The searchText API searches the document for your searchValue, and jumps to the first found result.
To jump to next next result, the function must be called again.
WebViewer(
{ ...options },
document.getElementById('viewer')
).then(instance => {
const { documentViewer } = instance.Core;
// search can only be performed after a document is loaded
instance.documentViewer.addEventListener('documentLoaded', () => {
const searchValue = 'your_search_text'
instance.UI.searchText(searchValue, {
...options // see the API reference for options
})
})
})
Searching a full document
The searchTextFull API searches the entire document, and highlights all results.
WebViewer(
{ ...options },
document.getElementById('viewer')
).then(instance => {
const { documentViewer } = instance.Core;
// search can only be performed after a document is loaded
documentViewer.addEventListener('documentLoaded', () => {
const searchValue = 'your_search_text'
instance.UI.searchTextFull(searchValue, {
...options // see the API reference for options
})
})
})
Regex search
Both the APIs above can accept a regex string. Note that the regex must be passed as a string, and the regex option must be set to true.
WebViewer(
{ ...options },
document.getElementById('viewer')
).then(instance => {
const { documentViewer } = instance.Core;
// search can only be performed after a document is loaded
documentViewer.addEventListener('documentLoaded', () => {
// Find any URLs that end with .com
const searchRegex = 'www(.*)\.com.'
instance.UI.searchTextFull(searchRegex, {
regex: true
})
})
})
Changing highlight colors
To change the color of the search result highlights, you can use the setSearchHighlightColors.
You can pass either a valid CSS color string, or an instance of the Color class,
WebViewer(
{ ...options },
document.getElementById('viewer')
).then(instance => {
const { documentViewer, Annotations } = instance.Core;
documentViewer.setSearchHighlightColors({
searchResult: new Annotations.Color(0, 0, 255, 0.5),
activeSearchResult: 'rgba(0, 255, 0, 0.5)'
});
})
Advanced searching
Please see this guide for more advanced guides on searching,
