写在前面
在本文中，我们将探讨如何使用 React 16+Webpack 和 pdfjs-dist 或 react-pdf 库来实现 PDF 文件的显示、定位和高亮功能。这些库提供了强大的工具和 API，使得在 Web 应用中处理 PDF 文件变得更加容易。
项目设置
首先，我们需要创建一个新的 React 项目并安装所需的依赖。可以使用 create-react-app 工具来快速生成项目骨架：
npx create-react-app pdf-viewer
cd pdf-viewer
接下来，安装 pdfjs-dist 或 react-pdf 库：
# 使用 pdfjs-dist
npm install pdfjs-dist# 或者使用 react-pdf
npm install react-pdf
使用 pdfjs-dist
pdfjs-dist 是一个流行的 JavaScript 库，用于在浏览器中解析和显示 PDF 文件。以下是使用 pdfjs-dist 实现 PDF 文件显示、定位和高亮的步骤：
- 导入 pdfjs-dist
在你的 React 组件中导入 pdfjs-dist：
import { PDFDocument } from 'pdfjs-dist';
- 加载 PDF 文件
使用 PDFDocument 类从 URL 或文件对象加载 PDF 文档：
const pdfUrl = 'https://example.com/sample.pdf';PDFDocument.load(pdfUrl).promise.then((pdf) => {// PDF 加载完成后的处理逻辑
});
- 显示 PDF 页面
获取 PDF 文档的第一页并将其渲染到 canvas 元素中：
const canvas = document.getElementById('pdf-canvas');
const ctx = canvas.getContext('2d');pdf.getPage(1).then((page) => {const viewport = page.getViewport({ scale: 1 });canvas.height = viewport.height;canvas.width = viewport.width;const renderContext = {canvasContext: ctx,viewport,};page.render(renderContext);
});
- 定位到特定页面
使用 getPage() 方法获取指定页码的页面对象：
const targetPageNumber = 3;
pdf.getPage(targetPageNumber).then((page) => {// 定位到目标页面的处理逻辑
});
- 高亮文本
使用 getTextContent() 方法获取页面上的文本内容，并使用 canvas API 在文本位置绘制高亮矩形：
page.getTextContent().then((textContent) => {const items = textContent.items;for (let i = 0; i < items.length; i++) {const item = items[i];if (item.str === 'Hello, world!') {const transform = page.getTransform(item.transform);const x = transform[4];const y = transform[5];const width = item.width;const height = item.height;ctx.fillStyle = 'rgba(255, 255, 0, 0.5)';ctx.fillRect(x, y, width, height);}}
});
使用 react-pdf
react-pdf 是一个专门为 React 应用设计的 PDF 查看器组件。以下是使用 react-pdf 实现 PDF 文件显示、定位和高亮的步骤：
- 导入 react-pdf
在你的 React 组件中导入 react-pdf：
import { Document, Page } from 'react-pdf';
- 加载 PDF 文件
使用 Document 组件加载 PDF 文档：
const pdfUrl = 'https://example.com/sample.pdf';<Document file={pdfUrl}><Page pageNumber={1} />
</Document>
- 显示 PDF 页面
使用 Page 组件渲染 PDF 页面：
const pdfUrl = 'https://example.com/sample.pdf';<Document file={pdfUrl}><Page pageNumber={1} />
</Document>
- 定位到特定页面
通过更改 Page 组件的 pageNumber 属性来定位到指定页码：
const targetPageNumber = 3;<Document file={pdfUrl}><Page pageNumber={targetPageNumber} />
</Document>
- 高亮文本
react-pdf 不直接支持高亮文本功能，但可以通过自定义渲染函数来实现。例如，可以使用 onLoadSuccess 回调获取 PDF 文档的文本内容，并在渲染页面时绘制高亮矩形：
const pdfUrl = 'https://example.com/sample.pdf';function CustomPage({ pageNumber, width, height }) {const [textContent, setTextContent] = useState(null);useEffect(() => {const page = pdf.getPage(pageNumber);page.getTextContent().then((textContent) => {setTextContent(textContent);});}, [pageNumber]);return (<PagepageNumber={pageNumber}width={width}height={height}render={(page) => {// 在这里绘制高亮矩形if (textContent) {const canvas = page.getCanvas();const ctx = canvas.getContext('2d');//...}}}/>);
}<Document file={pdfUrl}><CustomPage pageNumber={1} width={400} height={600} />
</Document>
总结
在本文中，我们探讨了如何使用 React 16+Webpack 和 pdfjs-dist 或 react-pdf 库来实现 PDF 文件的显示、定位和高亮功能。无论选择哪种库，都可以轻松地在 Web 应用中处理 PDF 文件。记住，根据你的具体需求和项目要求，选择最适合的库和方法。