最近因为业务需求，需要在项目中预览pdf，并且搜索pdf中的文字高亮显示。本人才疏学浅，上网查了不少资料，奈何网上关于这方面的资料太少，整了三天才整出来。记录在这里，供以后学习使用

第一种vue-pdf

一种比较简洁的pdf预览插件，也是vue插件库推荐的, 文档很清楚资料也很多就不详述了 GitHub github.com/FranckFreib…

第二种pdfjs-dist

pdf.js的构建版本我采用的版本是 pdfjs-dist@2.2.228

渲染方式

第一种渲染方式

通过创建一个承载pdf的canvas标签，然后通过pdf.render()的方式将pdf渲染到创建的canvas标签上

参考链接

juejin.cn/post/692014…

第二种渲染方式

采用pdf.js 自带的预览pdf的viewer

创建

import pdfjs from "pdfjs-dist";
import {
  PDFLinkService,
  PDFViewer,
  PDFFindController
} from "pdfjs-dist/web/pdf_viewer";
import "pdfjs-dist/web/pdf_viewer.css";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker";
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

    /*加载PDF文件*/
    loadPdf(url) {
      const linkService = new PDFLinkService();
      const findController = new PDFFindController({
        linkService,
      });
      let _this = this;
      // PDFSinglePageViewer 单页控制器
      // PDFViewer 多页控制器
      const newViewer = new PDFViewer({
        container: _this.$refs.containerRef, // 显示PDF的容器dom
        linkService, // 不懂但必须
        useOnlyCssZoom: true, // 否可以通过css控制页面的缩放,默认 false
        textLayerMode: 1, // 显示文字类型 渲染文字图层
        // renderer:'svg', // 用什么方式渲染 可选canvas和svg
        findController, // 文字查找控制器

      });
      linkService.setViewer(newViewer);
      // 缩放
      newViewer.currentScaleValue = "page-width"; // 无效 暂且不知道为什么
      pdfjs.getDocument(url).promise.then((pdf) => {
        if (pdf) {
          // 总页数
          _this.numPages = pdf.numPages;
          newViewer.setDocument(pdf);
          linkService.setDocument(pdf);
          // 全局的newViewer
          _this.newViewer = newViewer;
          // 判断是否已经渲染完毕
          _this.interval = setInterval(() => {
            _this.loadCompletePdf();
          }, 100);
        }
      });
    },
复制代码

以上方法注册了一个单页预览pdf的viewer，需要注意的是

PDFViewer 创建一个预览多页pdf的对象
PDFSinglePageViewer 创建预览单页pdf的对象参数同PDFViewer
PDFLinkService 不太懂是干什么的但是是必须的
PDFFindController 文字查找控制器其他的还有一些像DownloadManager下载控制器等这些对象，这里没用到就不细说了，具体的可以查看pdf.js源码。

new PDFSinglePageViewer({})除了上面代码中写到的参数，还有一些其他参数，如下

maxCanvasPixels 最大canvas像素
enablePrintAutoRotate 启用打印旋转

还有一些属性可以通过newViewer对象直接访问，如下

pagesCount 总页数
pageViewsReady 是否渲染完成，通过这个属性判断是不是所有的页面都渲染完成，因为pdf渲染是异步的，有一些事件监听是需要渲染完成后再进行
currnetPageNumber 当前页码，翻页使用
currentScale 缩放比率，设置页面缩放需要用currentScaleValue
pagesRotation 页面旋转
isPageVisible(pageNumber) 传入页码判断页面是否不可见上面代码对应的html

<div id="viewerContainer" class="viewerContainer" ref="containerRef">
    <div id="viewer" class="pdfViewer"></div>
 </div>
复制代码

翻页

翻页就是改变currnetPageNumber的值 this.newViewer.currentPageNumber = num;

缩放

缩放就是改变currentScaleValue的值 this.newViewer.currentScaleValue = "page-width"

文字查找

this.newViewer.findController.executeCommand("find", this.searcher);

查找参数

phraseSearch: true, // 是否短语查找
query: "", // 查询字段
findPrevious: undefined, // 是否循环查找
highlightAll: true, // 是否高亮
caseSensitive: false, // 区分大小写
entireWord: false, // 整个单词
复制代码

注意定位查找字段时需要传入 findagain

先到这里，以后有啥需要补充的再加

参考资料

zhuanlan.zhihu.com/p/136565799

github.com/mozilla/pdf…

记一次pdf.js的使用