【番外篇】前端页面如何优雅的显示PDF：实现文字搜索功能

编程琐事
4,968 阅读5分钟
  • 导读

之前花了一部分时间研究pdf.js 在react 上面的使用，也写了五篇文章记录自己的学习成果，实现了简单的pdf预览和工具栏的翻页、缩放，文字复制的简单功能以及采用虚拟dom的方式优化页数比较多的情况下渲染慢的问题。但是有一个关键的功能没有实现就是pdf文字查找功能，这篇我们就实现一下这个功能

推荐阅读

修改渲染方式

如果你看过前几篇文章，就会知道我们之前的渲染方式是通过创建一个承载pdf的canvas标签通过pdf.render()的方式渲染到创建的canvas，如果需要渲染pdf的文字需要创建一个与canvas样式一样的div承载文字信息，就可以实现pdf里面文字的右键复制功能。

当然了渲染PDF的方式不止上面一种,上面那种也是官网不太推荐的使用方式，因为pdf.js 已经实现了一个pdf预览的viewer，我们可以直接拿来使用

import { PDFLinkService, PDFFindController, PDFViewer } from 'pdfjs-dist/web/pdf_viewer';

const linkService = new PDFLinkService();
const findController = new PDFFindController({
  linkService,
});
const newViewer = new PDFViewer({
  container: containerRef.current,
  linkService,
  useOnlyCssZoom: USE_ONLY_CSS_ZOOM,
  textLayerMode: TEXT_LAYER_MODE,
  // renderer:'svg',
  findController,
});
linkService.setViewer(newViewer);
// 设置初始缩放
newViewer.currentScaleValue = scale;

以上方法注册了一个pdf预览的viewer 对应的html如下

<div
  id="viewerContainer"
  className="viewerContainer"
  ref={containerRef}
  >
  <div
  className="pdfViewer"
  id="innerContainer"
  />
  </div>
</div>

以上代码我也是根据pdf.js 给出的例子不断的摸索出来的，有些内容也是一知半解，这里只解释我会的东西

new PDFViewer({}) 官方给提供的一个viewer，pdf.js中demo例子上面所有的功能都在这个viewer中，本节需要有查找功能用到 PDFFindController(),把它作为参数传给viewer。在后面使用他的 viewer.findController.executeCommand('findagain', searcher);方法进行查找，searcher 查找对象在后面会说明里面内容

其他参数说明

  • container 显示PDF的容器dom，在他里面需要有一个div显示PDF页面信息，一个页面是一个div，里面div的className建议使用pdfViewer可以直接使用pdf.js提供的样式，(也可以自己写样式比较费劲)
  • linkService 不是很懂，但是需要^ _ ^
  • useOnlyCssZoom 是否可以通过css控制页面的缩放,默认 false
  • textLayerMode 是否显示文字 默认0 不显示，1 显示
  • findController 传入文字查找控制器

还有一些别的参数

  • render 渲染的类型 默认是canvas 可选svg
  • maxCanvasPixels 最大canvas像素
  • enablePrintAutoRotate 启用打印旋转

如果使用这个viewer 还有一些属性通过newViewer对象直接访问

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

以上就是使用PDFViewer()实现预览的基本理论和相关使用到的参数

开始编码

进入页面创建viewer

const initialViewer = (url) => {
  const linkService = new PDFLinkService();
  const findController = new PDFFindController({
    linkService,
  });
  const newViewer = new PDFViewer({
    container: containerRef.current,
    linkService,
    useOnlyCssZoom: true,
    textLayerMode: 1,
    // renderer:'svg',
    findController,
  });
  linkService.setViewer(newViewer);
  // 设置初始缩放
  newViewer.currentScaleValue = scale;

  const loadingTask = pdfjs.getDocument({ url });
  loadingTask.promise.then(pdf => {
    if (pdf) {
      const nums = pdf.numPages
      setNumPages(nums)
      newViewer.setDocument(pdf);
      linkService.setDocument(pdf);
      setViewer(newViewer)
      // 判断是否已经渲染完毕
      const interval = setInterval(() => { loadPdf() }, 1000);
      function loadPdf() {
        if (newViewer.pageViewsReady) {
          // ... 渲染完成操作
        }
      }
    }
  })
}

对应的html 就是上面的代码，其中container是通过useRef 创建的

const containerRef = useRef(null)

实现翻页和缩放

  • 翻页

翻页的实现就是改变上面提到的currentPageNumber值

viewer.currentPageNumber = num
  • 缩放

修改缩放的方式也是通过修改属性值改变 currentScaleValue

viewer.currentScaleValue = newScale;

缩放的参数是有固定格式的，如果是数字的话可以随便多少就行，但是缩放也是可以是字符串形式的，如下:

<select
  value={`${scale}`}
  onChange={e => {
    const newScale = e.target.value
    viewer.currentScaleValue = newScale;
    setScale(newScale)
  }}
  >
  <option value="auto">自动缩放</option>
  <option value="page-actual">实际大小</option>
  <option value="page-fit">适合页面</option>
  <option value="page-width">适合页宽</option>
  <option value="0.50">50%</option>
  <option value="0.75">75%</option>
  <option value="1">100%</option>
  <option value="1.25">125%</option>
  <option value="1.50">150%</option>
  <option value="1.75">175%</option>
  <option value="2">200%</option>
  <option value="3">300%</option>
  <option value="4">400%</option>
</select>

文字查找

  • 定义查找对像
const [searcher = {}, setSearcher] = useState({
  phraseSearch: true, // 是否短语查找
  query: '', // 查询字段
  findPrevious: true, // 是否循环查找
  highlightAll: true, // 是否高亮
});

用户输入的时候改变

<input
  type="text"
  id="searchInput"
  onChange={e => {
    setSearcher({
      ...searcher,
      query: e.target.value,
    });
  }}
/>

通过事件监听回车事件进行查找

# 使用Umi Hooks 进行事件监听
useKeyPress('enter', event => {
    viewer.findController.executeCommand('findagain', searcher);
});

回车查找进行了页面的跳转和循环查找

其他事件监听

  • 滚动页码 ,滚动时监听滚动到第几页
document.addEventListener('pagechanging', function (evt) {
  const page = evt.detail.pageNumber;
  changePage(page)
})

const changePage = (num) => {
  viewer.currentPageNumber = num
  setCurrentPageNumber(num)
}
  • 查询统计
useEffect(() => {
  window.addEventListener('updatefindcontrolstate', e => {
    setMatchesCount(e.detail.matchesCount);
  });
  window.addEventListener('updatefindmatchescount', e => {
    setMatchesCount(e.detail.matchesCount);
  })
})
matchesCount: {
  current: // 当前查找的第几项
  total: // 总共有几项
}

源码

github.com/LiuSandy/re…

avatar
文章
阅读
粉丝