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

news2024/9/23 13:25:07

在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.coloradmin.cn/o/811138.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C语言进阶篇】看完这篇结构体文章,我向数据结构又进了一大步!(结构体进阶详解)

🎬 鸽芷咕:个人主页 🔥 个人专栏:《C语言初阶篇》 《C语言进阶篇》 ⛺️生活的理想,就是为了理想的生活! 文章目录 📋 前言1 结构体的声明1.1 结构的基础知识1.2 结构的声明1.2.1 . 匿名结构体类型声明1.2.2 匿名结构…

【深度学习实践】垃圾检测

简介 本项目使用深度学习目标检测开源框架PaddleDetection中的yolox算法实现了垃圾检测,本文包含了从头训练yolox模型和直接使用训练好的模型进行推理的代码及相关权重。 一、数据集准备 本次训练的数据集为coco格式,共包含150张垃圾的照片&#xff0…

每日一题——丢失的数字

丢失的数字 题目链接 注:这一题的解法建立在位运算——异或^的基础之上,如果位运算和异或操作符不太了解,建议先看看: 位运算详解 只出现一次的数字 思路 同样,这题要求时间复杂度为O(n),空间复杂度为O…

二叉树中的深搜

一)计算布尔二叉树的值 2331. 计算布尔二叉树的值 - 力扣(LeetCode) 1)计算布尔二叉树需要从叶子节点向上进行计算,从下向上进行计算 2)完整二叉树是同时拥有左孩子和右孩子,或者是完全没有右孩子 3)当我只是盯着根节点来看的时候…

JSON Web 令牌 (JWT)攻击

一、什么是JSON Web 令牌 (JWT) JSON Web令牌(JWT)是一种开放标准(RFC 7519),用于在网络应用间传递声明信息。它是一种轻量级、自包含的安全性传输格式,通常用于在身份验证和授权过程…

三更博客系统(完整笔记+前后台系统代码实现)

三更博客前后端分离系统 前后端分离博客系统1.技术栈2.创建工程3.博客前台3.0 准备工作3.1 SpringBoot和MybatisPuls整合配置测试 3.1 热门文章列表3.1.0 文章表分析3.1.1 需求3.1.2 接口设计3.1.3 基础版本代码实现3.1.4 使用VO优化3.1.5 字面值处理 3.2 Bean拷贝工具类封装3.…

C#百万数据处理

C#百万数据处理 在我们经验的不断增长中不可避免的会遇到一些数据量很大操作也复杂的业务 这种情况我们如何取优化如何去处理呢?一般都要根据业务逻辑和背景去进行合理的改进。 文章目录 C#百万数据处理前言一、项目业务需求和开发背景项目开发背景数据量计算业务需…

OpenFeign原理浅析

OpenFeign原理我个人觉得是非常简单的,如果你对Spring非常了解,知道FactoryBean,以及注入bean的方式,并掌握动态代理,那么自己实现一个类似这样的Http代理客户端是一点问题也没有的! 使用流程 首先我们先过…

BLE连接、配对和绑定

参考:一篇文章带你解读蓝牙配对绑定 参考:BLE安全之SM剖析(1) 参考:BLE安全之SM剖析(2) 参考:BLE安全之SM剖析(3) 参考:https://blog.csdn.net/chengbaojin/article/details/103691046 参考&…

【MQTT5】原生PHP对接Uni H5、APP、微信小程序实时通讯消息服务

文章目录 视频演示效果前言一、分析二、全局注入MQTT连接1.引入库2.写入全局连接代码 二、PHP环境建立总结 视频演示效果 【uniapp】实现买定离手小游戏 前言 Mqtt不同环境问题太多,新手可以看下 《【MQTT】Esp32数据上传采集:最新mqtt插件(支…

Flowable-服务-骆驼任务

目录 定义图形标记XML内容Flowable与Camel集成使用示例设计Came路由代码 定义 Camel 任务不是 BPMN 2.0 规范定义的官方任务,在 Flowable 中,Camel 任务是作为一种特殊的服务 任务来实现的。主要做路由工作的。 图形标记 由于 Camel 任务不是 BPMN 2.…

BMI指数计算小工具Java

现在越来越多的人关注健康,关注身材管理,不妨做个小工具,计算自己的BMI,给自己制定合理的健身或减肥计划,享受健康生活!!!BMI的计算标准从网上找的,不知道是否准确&#…

❤ yarn 和npm 的使用

❤ yarn 和npm 的使用 yarn 版本1的使用 yarn 简介 Yarn是facebook发布的一款取代npm的包管理工具。 yarn特点: 1,速度超快。 Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因…

TransGPT 开源交通大模型开源

TransGPT 是开源交通大模型,主要致力于在真实交通行业中发挥实际价值。 它能够实现交通情况预测、智能咨询助手、公共交通服务、交通规划设计、交通安全教育、协助管理、交通事故报告和分析、自动驾驶辅助系统等功能。 TransGPT 作为一个通用常识交通大模型&#…

cmd相关操作命令

1.根据端口号查询对应进程的PID netstat -ano | findstr 端口号 例如:netstat -ano | findstr 9080;该端口所属进程的PID为6684 2.根据PID查询对应进程 tasklist | findstr PID 例如:tasklist | findstr 6684;该PID所属进程名为…

啥都收费,不仅智能电视没人买了,连电视盒子也卖不出了

分析机构给出的数据指今年上半年国内的电视盒子销量跌破百万至92.9万台,同比下滑29%,享受额更是大跌32%,显示出电视盒子即使大幅降价也没人买了,导致消费者远离电视在于收费太离谱了。 一、啥都收费 如今的智能电视其实并不智能&a…

使用贝叶斯滤波器通过运动模型和嘈杂的墙壁传感器定位机器人研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

Day48 算法记录|动态规划15 (子序列)

子序列 392. 判断子序列115.不同的子序列 392. 判断子序列 这道题和1143最长公共字串相同 dp[i][j] 表示以下标i-1为结尾的字符串s,和以下标j-1为结尾的字符串t,相同子序列的长度为dp[i][j]。 class Solution {public boolean isSubsequence(String s,…

【C语言初阶篇】自定义类型结构体我不允许还有人不会!

🎬 鸽芷咕:个人主页 🔥 个人专栏:《C语言初阶篇》 《C语言进阶篇》 ⛺️生活的理想,就是为了理想的生活! 文章目录 📋 前言1 . 什么是结构体1.1 结构的定义1.2 结构的声明 2.结构体初始化2.1 用标签名定义和初始化2.2…

【Vue】Vue-Cli整合Echart

Vue-Cli整合Echart 文章目录 Vue-Cli整合Echart一、创建Vue-Cli项目1、创建并运行Vue Cli hello-world项目2、运行vue-element-admin项目 二、Vue-Cli整合Echart1、使用echarts CDN源实现K线图绘制2、使用VueCli echarts实现K线图绘制3、echart更多使用问题整理 一、创建Vue-C…