使用 React 16+Webpack 和 pdfjs-dist 或 react-pdf 实现 PDF 文件显示、定位和高亮

写在前面

在本文中，我们将探讨如何使用 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 文件显示、定位和高亮的步骤：

1. 导入 pdfjs-dist

在你的 React 组件中导入 pdfjs-dist：

import { PDFDocument } from 'pdfjs-dist';

2. 加载 PDF 文件

使用 PDFDocument 类从 URL 或文件对象加载 PDF 文档：

const pdfUrl = 'https://example.com/sample.pdf';PDFDocument.load(pdfUrl).promise.then((pdf) => {// PDF 加载完成后的处理逻辑
});

3. 显示 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);
});

4. 定位到特定页面

使用 getPage() 方法获取指定页码的页面对象：

const targetPageNumber = 3;
pdf.getPage(targetPageNumber).then((page) => {// 定位到目标页面的处理逻辑
});

5. 高亮文本

使用 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 文件显示、定位和高亮的步骤：

1. 导入 react-pdf

在你的 React 组件中导入 react-pdf：

import { Document, Page } from 'react-pdf';

2. 加载 PDF 文件

使用 Document 组件加载 PDF 文档：

const pdfUrl = 'https://example.com/sample.pdf';<Document file={pdfUrl}><Page pageNumber={1} />
</Document>

3. 显示 PDF 页面

使用 Page 组件渲染 PDF 页面：

const pdfUrl = 'https://example.com/sample.pdf';<Document file={pdfUrl}><Page pageNumber={1} />
</Document>

4. 定位到特定页面

通过更改 Page 组件的 pageNumber 属性来定位到指定页码：

const targetPageNumber = 3;<Document file={pdfUrl}><Page pageNumber={targetPageNumber} />
</Document>

5. 高亮文本

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 文件。记住，根据你的具体需求和项目要求，选择最适合的库和方法。