js预览pdf_【番外篇】前端页面如何优雅的显示PDF：实现文字搜索功能-CSDN博客

本文介绍如何在前端使用pdf.js实现PDF预览，并重点讲解如何添加文字搜索功能。通过创建PDFViewer，结合相关参数配置，实现翻页、缩放。详细介绍了文字查找的实现过程，包括事件监听和页面跳转。最后提供了源码链接。

摘要由CSDN通过智能技术生成

1、前端页面如何优雅的显示PDF：原理说明

2、前端页面如何优雅的显示PDF(上)：渲染页面

3、前端页面如何优雅的显示PDF(中)：渲染文本

4、前端页面如何优雅的显示PDF(下)：添加工具栏

5、【最终篇】前端页面如何优雅的显示PDF：虚拟滚动

正 · 文 · 来 · 啦 ·

导读

之前花了一部分时间研究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,