当前位置: 首页 > 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

相关文章:

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的配置文件&#xf…...

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…...

香橙派Lite全解析:从硬件到应用,玩转ARM开发板与物联网项目

1. 香橙派Lite:一张能装进口袋的“万能主板”如果你对树莓派(Raspberry Pi)这类单板电脑有所耳闻,但又觉得它价格偏高或者想尝试更多选择,那么来自中国的香橙派(Orange Pi)系列绝对值得你深入了…...

淘宝淘金币自动化脚本:每天节省25分钟的数字生活革命

淘宝淘金币自动化脚本:每天节省25分钟的数字生活革命 【免费下载链接】taojinbi 淘宝淘金币自动执行脚本,包含蚂蚁森林收取能量,芭芭农场全任务,解放你的双手 项目地址: https://gitcode.com/gh_mirrors/ta/taojinbi 你是否…...

避坑指南:UE5 GAS技能系统中,角色转向功能的两种实现方案与接口设计思考

UE5 GAS技能系统中角色转向功能的架构设计与实战优化 在动作角色扮演游戏开发中,技能释放时的角色朝向处理往往成为影响战斗体验的关键细节。当火球需要精准飞向目标、剑刃应当准确劈砍敌人时,角色朝向的瞬间调整不仅关乎视觉表现,更直接影响…...

甲级钢制隔热平开防火窗:技术参数、结构工艺与工程应用解析

一、产品概述甲级钢制隔热平开防火窗严格依照国家消防标准制造,采用加厚冷轧镀锌钢板打造框架,搭配防火填充材料、隔热防火玻璃与专用密封配件,防火隔热、密闭性强,耐用抗腐蚀。相较于低等级防火窗,本品耐火隔热性能更…...

别再死磕原生OpenStack了!华为云Stack HCS 8.0的极简部署与高可用设计,真香!

华为云Stack HCS 8.0:企业私有云部署的革命性突破 当企业IT架构师面对私有云平台选型时,部署复杂性和系统可靠性往往成为最令人头疼的两大难题。原生OpenStack以其高度灵活性和开源特性吸引了大量技术团队,但随之而来的却是漫长的部署周期、繁…...

Hi3861驱动MPU6050与OLED:嵌入式I2C传感器数据采集与显示实战

1. 项目概述与核心价值最近在捣鼓小熊派的Hi3861开发板,想用它来做个姿态传感器的小玩意儿。核心想法很简单:通过I2C总线读取MPU6050六轴传感器的数据,然后把姿态角(比如俯仰角、横滚角)实时显示在一块小小的OLED屏幕上…...

谷歌关键词优化具体要做什么?独立站新手必看的5条铁规

建站满60天,后台数据面板显示0笔订单。 访问谷歌站长控制台,过去28天曝光次数仅为12。一家售卖宠物玩具的独立站上线45天,上传200个商品页面。每页装填3句机器翻译英文。页面缺失买家真实评价,网页找不到1处猫咪啃咬耐用度测试图。…...

BENTLY NEVADA 330980-51-00传感器测量系统

BENTLY NEVADA 330980-51-00 是一款本特利内华达出品的传感器测量系统,专用于旋转机械的振动、位移及转速监测,广泛应用于汽轮机、压缩机、风机等关键设备。中间:15条产品特点330980-51-00 采用涡流传感器原理,非接触测量&#xf…...

Perplexity被操控?数据溯源能力全解析,3类高危误判场景+实时交叉验证方案

更多请点击: https://kaifayun.com 第一章:Perplexity被操控?数据溯源能力全解析,3类高危误判场景实时交叉验证方案 Perplexity 作为语言模型评估与推理可信度的关键指标,正面临日益隐蔽的数据污染与人为诱导风险。当…...

2026年六大GEO公司排名竞争力横评及企业选型实操指南针

根据易观发布的《中国 GEO 行业发展报告 2026》显示,2026年国内 GEO 市场规模已达 30 亿元,在短短 3 年内实现了 35 倍的爆发式增长,超过 68% 的中大型企业已将生成式引擎优化正式纳入年度预算。在当前由大模型驱动的信息分发范式下&#xff…...