一、前言
在当今数字化信息传播的时代，PDF文档作为一种常见的文件格式扮演着重要的角色。对于前端开发者而言，实现在网页上渲染和展示PDF文件是一项常见但也具有挑战性的任务。幸运的是，现在有一个强大的工具——@react-pdf-viewer，能够帮助我们轻松实现前端PDF文件的渲染。本文将介绍@react-pdf-viewer的使用方法，让您轻松掌握前端渲染PDF的技巧，为您的项目增添新的可能性。让我们一起探索这个令人惊叹的前端PDF渲染工具，为您的网页带来更多可能性吧！
二、简介
1、@react-pdf-viewer介绍
@react-pdf-viewer 是一个基于 pdfjs 封装的 React PDF 阅读器组件库，提供了在 React 应用中展示和操作 PDF 文件的功能。用户可以通过该组件库轻松地在自己的应用中展示 PDF 文件，并实现诸如查看、搜索、缩放、打印等基本操作。
官网：A React component to view PDF documents - React PDF Viewer
注意：License需要花钱购买
2、插件版本参数
| 插件 | 版本 |
| Node | v22.13.0 |
| @types/react | ^18.0.33 |
| @types/react-dom | ^18.0.11 |
| @react-pdf-viewer/core | ^3.12.0 |
| @react-pdf-viewer/default-layout | ^3.12.0 |
| pdfjs-dist | 3.6.172 |
三、安装
npm install pdfjs-dist@3.4.120 --save
npm install @react-pdf-viewer/core@3.12.0
四、引入@react-pdf-viewer提供的webworker线程
注：pdfjs的使用Web Worker来处理大部分需要时间的任务，例如解析和呈现PDF文档。pdfjs版本必须与其对应的web work对应，
import { Worker } from '@react-pdf-viewer/core';
<Worker workerUrl="https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.min.js">
<!-- viewer 组件需要插入到这里 -->
...
</Worker>使用技巧：
1、web worker文件的加载
【1】方式一：使用CDN方式获取地址：
- https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.min.js
- https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js
通过pdfjs-dist提供的‘version’获取与其匹配的web worker
import * as pdfjsLib from 'pdfjs-dist';
const workerUrl = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;【2】方式二：下载web worker至本地，workerUrl地址替换为本地地址
2、如果您在不同的页面中使用查看器组件，建议将`Worker`放在布局级别，多个Views共用一份web worker就行。
例如，在典型的React应用程序中，可以放在App层，如下所示：
const App = () => {
return <Worker workerUrl="https://unpkg.com/pdfjsdist@3.4.120/build/pdf.worker.min.js">...</Worker>;
};五、功能实现
1、渲染PDF文件
【1】本地文件渲染
import { Worker, Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
import { pageNavigationPlugin } from '@react-pdf-viewer/page-navigation';
import * as pdfjsLib from 'pdfjs-dist';
const pdfUrl = '/财务报告.pdf';
const workerUrl = `/pdf.worker.min.js`;
const ViewPDF= () => {
return <>
<div style={{ height: '100vh' }}>
<Worker workerUrl={workerUrl}>
<Viewer fileUrl={pdfUrl} ></Viewer>
</Worker>
</div>
</>
};
export default ViewPDF;【2】服务端文件渲染
2、搜索+高亮
import './index.less';
import { Button } from 'antd';
import { useState, useEffect } from 'react';
import { Worker, Viewer } from '@react-pdf-viewer/core';
import { searchPlugin } from '@react-pdf-viewer/search';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
const pdfUrl = '/财务报告.pdf';
const workerUrl = `/pdf.worker.min.js`;
const ViewPDFSearch = () => {
const [searchText, setSearchText] = useState('');
// 初始化搜索插件
const searchPluginInstance = searchPlugin({
keyword: searchText, // 默认搜索关键词
onHighlightKeyword: (props: any) => {
const { highlightEle } = props;
highlightEle.style.backgroundColor = 'rgba(255, 255, 0, 0.4)'; // 设置高亮元素的背景颜色
highlightEle.style.color= 'black'
},
});
const { highlight } = searchPluginInstance;
const handleSearch = () => {
if (!searchText) return;
highlight(searchText)
};
return <>
<div>
<h1>PDF 搜索</h1>
<input
type="text"
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
placeholder="输入要搜索的内容"
/>
<Button onClick={handleSearch}>搜索</Button>
<div>
<div style={{ height: '100vh' }}>
<Worker workerUrl={workerUrl}>
<Viewer fileUrl={pdfUrl}
plugins={[
searchPluginInstance, // 搜索插件
]} // 注册插件
/>
</Worker>
</div>
</div>
</div>
</>
};
export default ViewPDFSearch;
效果：
