最全pdf，一文搞懂

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

实现过程概述：pdf.js将文本层转为html后，这样所有的文本就被div包裹起来了，这些div在也页面中都是有序的。它首先将这些文本从div中提取出来进行整合成一个字符串，通过字符串匹配得到关键词的位置，然后将这些位置放在一个数组中，然后通过text_layer_builder.js中的convertMatches函数，将该位置进行转化成包含有div的字符串中的位置：比如：这个关键词的首位置在第几个div偏移多少等，这样就可以根据这个转化的位置进行添加span标签和类名，来对关键词背景进行高亮。

原本pdf.js只是计算了单个词位置，而我可以通过循环计算多个不同词的位置，存到数组里，然后转化，就可以对多个不同的词进行高亮

注意：我这是压缩版的pdf.js实际运行特别慢，所以你需要在压缩版的view.js（即官网提供的demo）找到对应的函数进行修改。另外最好把把pdf.js提供的搜索功能屏蔽掉，通过display=none即可，因为多个词的高亮和该搜索功能，不能同时使用，除非你自己单独写一个扩展类

1。首先：在app.js中，创建一个函数如：

function wordHighLight(hightLightWords) { // 目前只能匹配一个，不能全部高亮
  let evt = {
    // source: PDFFindBar, // PDFFindBar的实例，不确定是干嘛用的？
    type: '',  // 这里默认应该是空的
    // 这里能默认跳转到query的位置，刚好能满足要求
    query: hightLightWords, // 高亮的关键词
    phraseSearch: false, // 支持整段文字匹配,如果时多个词的匹配只能是false
    caseSensitive: false, // 默认为false,搜索时忽略大小写
    highlightAll: true, // 设为true即关键词全部高亮
    // findPrevious: true,
  };
  PDFViewerApplication.findController.executeCommand('find' + evt.type, {//搜索执行函数
    query: evt.query,
    phraseSearch: evt.phraseSearch,
    caseSensitive: evt.caseSensitive,
    highlightAll: evt.highlightAll,
    findPrevious: evt.findPrevious,
  });
}

2. wordHighLight函数的调用

找到：PDFFindBar类（即搜索功能类）实例化处，在下面调用wordHighLight

     this.findBar = new PDFFindBar(findBarConfig, this.l10n);// 实例化PDFFindBar
      // 这时我要是时点击keydown就会触发查找事件
      // 同样的，我可以在这里直接触发查找函数
      let highLightWords = ['云林街菜鸟物流园职工，非人大代表或政协委员，租住雄楚市雄楚区金港一号小区11栋504室', '李毅', '张昌', '聊城', '犯罪经历', '犯罪嫌疑人张昌'];
       wordHighLight(highLightWords);

3.因为executeComand函数是在pdf_find_controller.js中执行，

在pdf_find_controller.js中，找到executeCommand(cmd, state)——》_nextMatch()——》calculateMatch(pageIndex)函数，由于query以前是单个词搜索（pdf.js提供的功能），这里我需要对涉及到query的做一些循环处理如下（我只是做了一些循环处理,请根据具体代码进行修改）：

  _calculateMatch(pageIndex) {  // 计算结果都返回到了对象的属性里，所以不需要通过
    // return 来获取想要的值
    // _normalize应该是规范化的意思
    let pageContent = this._normalize(this.pageContents[pageIndex]);
    let query_words = this.state.query;
    for (let i = 0; i < query_words.length; i++) {
      query_words[i] = this._normalize(query_words[i]);
      let caseSensitive = this.state.caseSensitive;

      if (!caseSensitive) { // 判断是否对大小写敏感
        // 如果不区分大小写，就把页面内容全部转为小写
        // 这里pagecont
        pageContent = pageContent.toLowerCase();
        query_words[i] = query_words[i].toLowerCase();
      }
    }
    // let query = this._normalize(this.state.query); // 这里只传只传了一个词，我需要传多个词
    let phraseSearch = this.state.phraseSearch;
    // let queryLen = query.length;
    // 查询内容为空，返回
    if (query_words.length === 0) {
      // Do nothing: the matches should be wiped out already.
      return;
    }
    // 不区分大小写的话
    // 以上内容规范了当前页和查询内容的规范化
    // 以下为真正的匹配的内容
    if (phraseSearch) {  // 若为true则可匹配整段文字
      this._calculatePhraseMatch(query_words, pageIndex, pageContent); // 词组匹配功能
    } else { // 若为false则只能匹配单个的词，特征：单个的词一般 两边有空格
      this._calculateWordMatch(query_words, pageIndex, pageContent); // 单词匹配功能
    }
    // 将计算的匹配结果，用来更新匹配结果
    this._updatePage(pageIndex); // 清除以前的匹配结果，渲染最新的匹配结果
    if (this.resumePageIdx === pageIndex) { // 如果恢复的页面索引等于当前索引
      this.resumePageIdx = null; // 将恢复页面的索引设为空
      this._nextPageMatch(); //
    }

    // Update the match count.
    // 更新匹配个数
    // this.pageMatches[pageIndex]里记录了第pageIndex页匹配的关键词的位置
    // 通过下面这样就可以获得匹配的个数了
    // 问题：我在搜索时，没有全部高亮时，就可以显示全部匹配的单词个数
    // 那我为什么不能全部高亮呢
    if (this.pageMatches[pageIndex].length > 0) {
      this.matchCount += this.pageMatches[pageIndex].length;
      this._updateUIResultsCount();
    }
  }

然后切换到——》_calculateWordMatch()函数中做一些循环处理：

_calculateWordMatch(query, pageIndex, pageContent) { // 单词匹配
    let matchesWithLength = [];
    // Divide the query into pieces and search for text in each piece.
    // 把搜索的词分开，然后搜索分开的词，最小单位为字母
    // query.match 清除了搜索值的空格，返回了一个有着被搜索词的数组
    // 例：hello world -->"hello","world"
    let test_query = query;

    for (let x = 0; x < test_query.length; x++) {
      // 只有在这里才可以给段落设置一个sign,后面我才能进行匹配，滚动到该段落位置
      let queryArray = test_query[x].match(/\S+/g); // '/S':任何一个非空白字符
      for (let i = 0, len = queryArray.length; i < len; i++) {


![img](https://img-blog.csdnimg.cn/img_convert/68d472a5b68a4d245debad98f7d6c7de.png)
![img](https://img-blog.csdnimg.cn/img_convert/10873799e3938210324e76d47a4f4932.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618679757)**

**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618679757)**