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

news2025/2/13 11:51:11

写在前面

在本文中，我们将探讨如何使用 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 (
    <Page
      pageNumber={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>