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

参考文档:

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

2.kkfileview预览pdf格式文件,实现多关键词高亮和定位_kkfileview+高亮方案-CSDN博客

3.PDF.js实现搜索多个不同的关键词高亮显示效果

最终效果:

需求描述:

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

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

解决代码:

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

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

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

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

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

  • _initializeViewerComponents 方法中:
javascript 复制代码
    // 添加代码
    // 自定义搜索关键词----------------------------------------
    this.searchKeywords = keyword => {
      if (typeof PDFViewerApplication !== 'undefined') {
        PDFViewerApplication.eventBus.dispatch('find', {
          query: keyword,
          caseSensitive: false,
          highlightAll: true,
          findPrevious: true
        });
      }
    }
  • setInitialView 方法中:
javascript 复制代码
    // 添加代码    
    // 高亮显示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('')),自动每个字都为搜索关键字。即最终效果图所示。

总结:

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

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

相关推荐
呼啦啦呼啦啦啦啦啦啦8 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
东华果汁哥1 天前
【URL 转换为PDF】HTML转换为PDF
前端·pdf·html
诸葛大钢铁2 天前
Excel转PDF的三种方法
笔记·职场和发展·pdf·excel
爱分享的飘哥2 天前
第二十一 篇 PDF文档自动化:Python一键合并、分割、水印、提取与加密解密!你的PDF全能管家!
python·pdf·python操作pdf·pdf 加解密·pdf 分割和合并
簪花走马过长安3 天前
【PDF识别改名】使用京东云OCR完成PDF图片识别改名,根据PDF图片内容批量改名详细步骤和解决方案
ui·pdf·ocr·excel·京东云·wps·图片区域识别重命名
ComPDFKit3 天前
为什么有些PDF无法复制文字?原理分析与解决方案
人工智能·pdf·ocr
开开心心就好3 天前
电脑桌面整理工具,一键自动分类
运维·服务器·前端·智能手机·pdf·bash·symfony
咖啡色格调3 天前
Java使用itextpdf7生成pdf文档
java·pdf·maven
开开心心_Every3 天前
可增添功能的鼠标右键优化工具
开发语言·pdf·c#·计算机外设·电脑·音视频·symfony
余大侠在劈柴4 天前
pdf.js 开发指南:在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf