kkFileView基于pdf.js实现多词高亮

参考文档:

1.文件文档在线预览转换解决方案和应用

2.kkfileview预览pdf格式文件,实现多关键词高亮和定位_kkfileview+高亮方案-CSDN博客
3.PDF.js实现搜索多个不同的关键词高亮显示效果

最终效果:

需求描述:

预览文件时,在文档中高亮显示搜索的文字,并实现分词、多词搜索

如:需要搜索"项目",文件中需要高亮所有的 "项" 和 "目" 

解决代码:

1. kkFileView属于开源,我们是基于kkFileView的代码修改实现。

需要的可以kkFileView---gitee地址中下载。

2. 根据参考文档1和2,基本可以实现高亮,但不能分开高亮,"项" 和 "目" 。

3. 根据参考文档3,实现分开高亮。

在文件  resources/static/pdfjs/web/viewer.js  中添加代码:

  • _initializeViewerComponents 方法中:

    // 添加代码// 自定义搜索关键词----------------------------------------this.searchKeywords = keyword => {if (typeof PDFViewerApplication !== 'undefined') {PDFViewerApplication.eventBus.dispatch('find', {query: keyword,caseSensitive: false,highlightAll: true,findPrevious: true});}}
  • setInitialView 方法中:

    // 添加代码    // 高亮显示N个关键词----------------------------------------// 获取关键词数组var keywords = new URL(decodeURIComponent(location)).searchParams.get('keyword');if (keywords && keywords !== 'undefined') {this.searchKeywords(keywords.split('|'));setTimeout(() => {// 让高亮效果统一,避免最后一个聚焦的样式不同document.querySelector(`.highlight.selected`).classList.remove('selected');}, 1000);}
  1.  new URL(decodeURIComponent(location)).searchParams.get('keyword') 中的 ‘keyword’对应效果图中地址后拼接的 &keyword= 搜索的文字。
  2. this.searchKeywords(keywords.split('|')):根据 | 切割字符串为数组。后面优化了一下为this.searchKeywords(keywords.split('')),自动每个字都为搜索关键字。即最终效果图所示。

总结: 

这篇主要记录一下需求,所有成效均为借鉴参考文档。

后续会融入到项目中.....

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/624669.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

免费SSL证书和付费SSL证书的区别和申请

免费SSL证书和付费SSL证书的区别点还是比较多的。对来说免费证书适用的环境会单一一些,一般使用免费证书的环境都是个人门户网站或者是小微企业的门户官网(无隐私信息)。受免费证书安全等级以及安全性的限制影响,如果是为了自身网…

如何利用纯前端技术,实现一个网页版视频编辑器?

纯网页版视频编辑器 一、前言二、功能实现三、所需技术四、部分功能实现4.1 素材预设4.2 多轨道剪辑 一、前言 介绍:本篇文章打算利用纯前端的技术,来实现一个网页版的视频编辑器。为什么突然想做一个这么项目来呢,主要是最近一直在利用手机…

ssm 体检预约管理系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 ssm 体检预约管理系统是一套完善的信息系统,结合springMVC框架完成本系统,对理解JSP java编程开发语言有帮助系统采用SSM框架(MVC模式开发),系统具有完整的源代码和数据库, 系统主要采用B/S…

快速删除node_modules依赖包的命令rimraf

1、安装rimraf npm install -g rimraf 2、使用命令删除node_modules rimraf node_modules *** window系统,使用命令很快就删除node_modules ***

RabbitMQ交换机的类型

交换机类型 可以看到,在订阅模型中,多了一个exchange角色,而且过程略有变化: Publisher:生产者,不再发送消息到队列中,而是发给交换机 Exchange:交换机,一方面&#xff…

JVM常见面试题

1. 什么是JVM JVM指的是Java虚拟机,本质上是一个运行在计算机上的程序,他的职责是运行Java字节码文件,作用是为了支持跨平台特性JVM的功能有三项:第一是解释执行字节码指令;第二是管理内存中对象的分配,完…

NetworkX、igraph、Gephi三大主流复杂网络建模与分析工具有什么区别?

★ 导言 ★ 本期给大家介绍NetworkX、igraph、Gephi三大主流复杂网络建模与分析工具的功能,并给出它们之间的区别与联系。 ★ 正文 ★ 正文开始之前,先附上三个工具的官方网址: NetworkX:https://networkx.org/ igraph:https://igraph.org/ Gephi:

eclipse中tomcat环境配置,2024年最新Web前端面试选择题

先自我介绍一下,小编浙江大学毕业,去过华为、字节跳动等大厂,目前阿里P7 深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞…

ChatGPT实用指南2024

随着ChatGPT技术的演进,越来越多的人开始在工作中利用此工具。以下是关于ChatGPT的实用指南,适合不太熟悉此技术的朋友参考。 一、ChatGPT概述 1. ChatGPT是什么? ChatGPT是基于OpenAI开发的GPT大型语言模型的智能对话工具。它能够通过自然语…

# RAG | Langchain # Langchain RAG:打造Markdown文件的结构化分割解决方案

【文章简介】 在信息技术的现代背景下,高效地处理和分析文本数据对于知识获取和决策支持至关重要。Markdown文件因其易读性和高效性,在文档编写和知识共享中占据了重要地位。然而,传统的文本处理方法往往忽视了Markdown的结构化特性&#xff…

Linux基础|线程池Part.1|线程池的定义和运行逻辑

线程池的定义和运行逻辑 多线程的问题: 如果并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了,这样频繁创建线程就会大大降低系统的效率,因为频繁创建线程和销毁线程需要时间。 那么一个很自然的想法就出现了…