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
相关文章:
PDF.js实现搜索关键词高亮显示效果
在static\PDF\web\viewer.js找到定义setInitialView方法 大约是在1202行,不同的pdf.js版本不同 在方法体最后面添加如下代码: // 高亮显示关键词---------------------------------------- var keyword new URL(decodeURIComponent(location)).searchP…...
Linux服务器安装JDK20
一、下载安装包 访问官网,找到JDK20,复制下载链接 我复制的链接是:JDK20 二、Linux服务器操作 1.服务器根目录下创建一个新的文件夹 cd /mkdir jdkscd /jdks2.将下载好的jdk-20上传到jdks下 3.解压缩 tar -zxvf jdk-20_linux-x64_bin.tar…...
vue强制刷新的方法
前言 在开发过程中,有时候会遇到这么一种情况: 1.切换页面页面没有更新 2.通过动态的赋值,但是dom没有及时更新,能够获取到动态赋的值,但是无法获取到双向绑定的dom节点, 这就需要我们手动进行强制刷新组件,下面这篇文章主要给大家介绍了关于vue组件强制刷新的方案…...
Linux下TCP网络服务器与客户端通信程序入门
文章目录 目标服务器与客户端通信流程TCP服务器代码TCP客户端代码 目标 实现客户端连接服务器,通过终端窗口发送信息给服务器端,服务器接收到信息后对信息数据进行回传,客户端读取回传信息并返回。 服务器与客户端通信流程 TCP服务器代码 …...
第九章:SSM整合
第九章:SSM整合 9.1:ContextLoaderListener Spring提供了监听器ContextLoaderListener,实现ServletContextListener接口,可监听ServletContext的状态,在web服务器的启动,读取Spring的配置文件…...
shell脚本部署springboot
#!/bin/bashecho "$1 jar包名称,$2 运行环境 " echo "reload jar: $1 env: $2 " if [ -z $1 ];thenecho "请输入jar包名称......." elseecho "停止开始......."IDps -ef | grep "$1" | grep -v "grep"…...
每日一道面试题之Iterator 和 ListIterator 有什么区别?
Iterator 和 ListIterator 都是 Java 集合框架中用于遍历集合元素的接口,但它们有一些区别: 使用的范围:Iterator可以迭代所有集合,而ListIterator 只能用于List及其子类。 继承关系:ListIterator 继承 Iterator,并且ListIterat…...
基于图像形态学处理的停车位检测matlab仿真
目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1. 图像预处理 4.2. 车辆定位 4.3. 停车位检测 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022a 3.部分核心程序 ......................................…...
【网络编程】同步IO/异步IO
同步IO的特点: 同步IO指的是用户进程触发I/O操作并等待或者轮询的去查看I/O操作是否就绪。 同步IO的执行者是IO操作的发起者。 同步IO需要发起者进行内核态到用户态的数据拷贝过程,所以这里必须阻塞 异步IO的特点: 异步IO是指用户进程触发I/O…...
五分钟理解NIO与BIO
java NIO与BIO的区别? BIO -- Blocking IO 即阻塞式 IO。NIO -- Non-Blocking IO, 即非阻塞式 IO 或异步 IO。 BIO 基于字节流和字符流进行操作,数据的读取写入必须阻塞在一个线程内等待其完成。 NIO 主要有三大核心部分: Channel (通道)…...
Python数据可视化工具——Pyecharts
目录 1 简介绘图前先导包 2 折线图3 饼图4 柱状图/条形图5 散点图6 箱线图7 热力图8 漏斗图9 3D柱状图10 其他:配置项 1 简介 Pyecharts是一款将python与echarts结合的强大的数据可视化工具 Pyecharts是一个用于生成echarts图表的类库。echarts是百度开源的一个数据…...
cjson常用API使用总结
json JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,广泛用于前后端数据传输和存储。在C语言中,我们可以使用cjson库来处理JSON数据。本问总结了在使用cjson库中各个常用API的用法,包括组装JSON&#x…...
Shell脚本学习-case语句开发rsync服务的脚本
利用case语句开发类似系统启动rsync启动服务的脚本。(可以参考系统rpcbind、nfs的脚本)。 例如: /etc/init.d/rsyncd {start | stop | restart } rsync --daemon pkill rsync [rootvm1 scripts]# cat start_rsync.sh #!/bin/bash #[ -f /…...
使用docker部署一个jar项目
简介: 通过docker镜像, docker可以在服务器上运行包含项目所需运行环境的docker容器, 在线仓库里有很多各个软件公司官方发布的镜像, 或者第三方的镜像. 如果我们需要使用docker把我们的应用程序打包成镜像, 别的机器上只要安装了docker, 就可以直接运行镜像, 而不需要再安装应…...
【Linux命令200例】tee将输入内容输出到屏幕和文件
🏆作者简介,黑夜开发者,全栈领域新星创作者✌,阿里云社区专家博主,2023年6月csdn上海赛道top4。 🏆本文已收录于专栏:Linux命令大全。 🏆本专栏我们会通过具体的系统的命令讲解加上鲜…...
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
前言 本文给大家分享三个具有过渡效果的汉堡图标,当点击汉堡图标时,过渡为叉号图标。这种具有过渡特效的图标挺炫酷的,感觉一下子给网页增加一点新颖特色。早在2015年左右,国外挺多优秀门户网站都有使用类似的图标,那…...
python面试题【题目+答案】
最近遇到了一份python的面试题,题目比较简单,时间控制在一个小时之内。以下是面试的题目跟答案,答案不代表最优解,只是当时所想到的一些思路,接下来将分享给大家。 目录 1. 给出下面打印结果 2.字典如何删除键、如何…...
Rocky(centos) jar 注册成服务,能开机自启动
概述 涉及:1)sh 无法直接运行java命令,可以软连,此处是直接路径 2)sh脚本报一堆空格换行错误:需将转成unix标准格式; #切换到上传的脚本路径 dos2unix 脚本文件名.sh 2)SELINUX …...
科大讯飞-鸟类分类挑战赛-测试【1】
科大讯飞-鸟类分类挑战赛-测试【1】 1. 比赛说明2. EfficientNet测试2.1 **模型搭建:**2.2 **模型训练:**2.3 训练过程可视化2.4 一些报错解决:1. 比赛说明 背景: 随着生态环境的不断变化和人类对自然资源的过度开发,世界各地的鸟类数量和种类正在发生着巨大的变化。为了更…...
两行CSS让页面提升渲染性能
content-visibility是CSS新增的属性,主要用来提高页面渲染性能,它可以控制一个元素是否渲染其内容,并且允许浏览器跳过这些元素的布局与渲染。 content-visibility: hidden的效果与display: none类似其区别在于: content-visibi…...
Evo-1两阶段训练拆解:如何像“冻住”VLM backbone一样,保住你的模型语义不漂移?
Evo-1两阶段训练拆解:如何像“冻住”VLM backbone一样,保住你的模型语义不漂移? 当你尝试将一个预训练的视觉语言模型(VLM)适配到机器人控制任务时,是否遇到过这样的困境:模型在训练集上表现良…...
技术深度解析:logitech-pubg项目实现PUBG后坐力控制的Lua脚本架构设计
技术深度解析:logitech-pubg项目实现PUBG后坐力控制的Lua脚本架构设计 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 在竞技射击游戏…...
免费开源甘特图工具GanttProject:从任务混乱到清晰可视化的完整解决方案
免费开源甘特图工具GanttProject:从任务混乱到清晰可视化的完整解决方案 【免费下载链接】ganttproject Official GanttProject repository 项目地址: https://gitcode.com/gh_mirrors/ga/ganttproject 还在为项目管理中的任务混乱、进度模糊而烦恼吗&#x…...
解锁5大核心技术:MelonLoader模组加载器完全指南
解锁5大核心技术:MelonLoader模组加载器完全指南 【免费下载链接】MelonLoader The Worlds First Universal Mod Loader for Unity Games compatible with both Il2Cpp and Mono 项目地址: https://gitcode.com/gh_mirrors/me/MelonLoader 引言:U…...
从零入门大模型应用开发:收藏这份学习清单,轻松转型高薪岗位!
文章指出当前AI应用开发社招要求已提升,不再满足于简单的API调用或Demo实现。文章警示三类人慎入AI开发社招,并强调能力复合化、工程深度和业务理解的重要性。作者分享了四年AI开发经验,建议深入原理、重构项目经验,并给出了量化解…...
Qwen3.5-35B-A3B-AWQ-4bit图文理解入门:支持中文的图片问答新手必学5个技巧
Qwen3.5-35B-A3B-AWQ-4bit图文理解入门:支持中文的图片问答新手必学5个技巧 1. 认识Qwen3.5图文理解模型 Qwen3.5-35B-A3B-AWQ-4bit是一款专为视觉多模态理解设计的量化模型,它能像人类一样"看懂"图片内容并进行智能对话。这个模型特别适合需…...
Swift-All镜像推荐:免配置快速部署,新手也能轻松上手
Swift-All镜像推荐:免配置快速部署,新手也能轻松上手 想体验大模型的强大能力,却被复杂的安装、环境配置和依赖问题搞得头大?今天,我为你介绍一个能彻底解决这些烦恼的“神器”——Swift-All镜像。它就像一个为你量身…...
opencode令牌分析插件使用:API调用监控部署教程
opencode令牌分析插件使用:API调用监控部署教程 1. 引言:为什么需要API调用监控? 当你使用AI编程助手时,是否曾经遇到过这些问题:不知道模型调用了多少次API、不清楚每次调用消耗了多少token、无法监控API调用的性能…...
[Python3高阶编程] - 横跨同步异步的利器: asgiref.sync
一、asgiref.sync 是什么?asgiref.sync 是 ASGI(Asynchronous Server Gateway Interface)参考实现库 asgiref 中的核心子模块,主要用于安全地桥接同步代码与异步代码。📌 一句话总结: 它让你在异步环境中调…...
Intv_AI_MK11 服务端错误处理:全面应对 403 Forbidden 等常见 HTTP 状态码
Intv_AI_MK11 服务端错误处理:全面应对 403 Forbidden 等常见 HTTP 状态码 1. 为什么需要关注API错误处理 在调用Intv_AI_MK11这类AI服务API时,开发者经常会遇到各种HTTP状态码返回。这些状态码就像是服务端给你的"小纸条",告诉你…...
