当前位置: 首页 > news >正文

PDF.js实现搜索关键词高亮显示效果

在static\PDF\web\viewer.js找到定义setInitialView方法

大约是在1202行,不同的pdf.js版本不同

在方法体最后面添加如下代码:

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

如果对高亮显示效果样式不满意可以去static\PDF\web\viewer.css

修改如下 

--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);
}

pdf.js如何使用Vue实现预览PDF并且支持打印,不会出现乱码、拉升变形、打印预览被切割等弱智问题_你挚爱的强哥的博客-CSDN博客根据您的使用场景下载解压放入vue项目的static/PDF。然后就按照最上面的代码开始用吧。https://blog.csdn.net/qq_37860634/article/details/131035174pdf.js报错问题解决使用PDF.js预览文件老是报错Message: file origin does not match viewer‘s_otherError @ app.js:1140怎么办??_pdf.js 报错_你挚爱的强哥的博客-CSDN博客这个web/app.js文件。这个报错真是要人命!_pdf.js 报错https://blog.csdn.net/qq_37860634/article/details/131035028

http://www.lryc.cn/news/106008.html

相关文章:

  • Linux服务器安装JDK20
  • vue强制刷新的方法
  • Linux下TCP网络服务器与客户端通信程序入门
  • 第九章:SSM整合
  • shell脚本部署springboot
  • 每日一道面试题之Iterator 和 ListIterator 有什么区别?
  • 基于图像形态学处理的停车位检测matlab仿真
  • 【网络编程】同步IO/异步IO
  • 五分钟理解NIO与BIO
  • Python数据可视化工具——Pyecharts
  • cjson常用API使用总结
  • Shell脚本学习-case语句开发rsync服务的脚本
  • 使用docker部署一个jar项目
  • 【Linux命令200例】tee将输入内容输出到屏幕和文件
  • 使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
  • python面试题【题目+答案】
  • Rocky(centos) jar 注册成服务,能开机自启动
  • 科大讯飞-鸟类分类挑战赛-测试【1】
  • 两行CSS让页面提升渲染性能
  • UniApp中tabbar设置了position: fixed以及bottom:0后出现一条缝隙,看到了后面的内容
  • 设计模式行为型——责任链模式
  • Xamarin.Android中Intent的使用
  • matplotlib绘制方波圆周分解动画
  • vue3+ts 实现枚举
  • 【Python】5分钟了解11个最佳的Python编译器和解释器
  • 如何安装、部署、启动Jenkins
  • sqlalchemy flask长时间未使用 导致数据库连接失效
  • Ubuntu 20.04 系统或图像界面卡死或完全无响应处理方法
  • Linux编辑器 - vim使用
  • 【Windows】磁盘快捷修复