th.jpeg
- 导读
之前花了一部分时间研究pdf.js 在react 上面的使用，也写了五篇文章记录自己的学习成果，实现了简单的pdf预览和工具栏的翻页、缩放，文字复制的简单功能以及采用虚拟dom的方式优化页数比较多的情况下渲染慢的问题。但是有一个关键的功能没有实现就是pdf文字查找功能，这篇我们就实现一下这个功能
推荐阅读
- 1、前端页面如何优雅的显示PDF：原理说明
- 2、前端页面如何优雅的显示PDF（上）：渲染页面
- 3、前端页面如何优雅的显示PDF（中）：渲染文本
- 4、前端页面如何优雅的显示PDF（下）：添加工具栏
- 5、【最终篇】前端页面如何优雅的显示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: // 总共有几项
}
