PDF.js implements search keyword highlighting effect

Find the definition setInitialView method in static\PDF\web\viewer.js

About line 1202, different pdf.js versions are different

Add the following code at the end of the method body:

// 高亮显示关键词----------------------------------------
var keyword= new URL(decodeURIComponent(location)).searchParams.get('keyword');//获取关键词
document.getElementById("findInput").value=keyword;//对查询输入框进行赋值
document.getElementById("findHighlightAll").click();//点击高亮按钮实现高亮显示关键词

If you are not satisfied with the highlighting effect style, you can go to static\PDF\web\viewer.css

Modify as follows 

--highlight-bg-color: 被搜索到的关键词背景色;
--highlight-selected-bg-color: 当前查看的被搜索到的关键词背景色;


.textLayer{
……
    opacity: 0.25;//设置关键词高亮透明度
……
}


//被搜索到的关键词
.textLayer .highlight {


}


//当前查看的被搜索到的关键词
.textLayer .highlight.selected {
    color: white;
    background-color: var(--highlight-selected-bg-color);
}

How does pdf.js use Vue to preview PDF and support printing, without garbled characters, stretching deformation, print preview being cut and other mentally handicapped problems_Your beloved strong brother's blog-CSDN blog Download and unzip it into vue according to your usage scenario static/PDF of the project. Then start using the code above. Https://blog.csdn.net/qq_37860634/article/details/131035174 pdf.js error resolution What to do when using PDF.js to preview files always report an error Message: file origin does not match viewer's_otherError @ app.js:1140 ? ? _pdf.js error_Your beloved strong brother's blog-CSDN blog this web/app.js file. This error is really fatal! _pdf.js error https://blog.csdn.net/qq_37860634/article/details/131035028

Guess you like

Origin blog.csdn.net/qq_37860634/article/details/132006447