如何在react-pdf中使用<Note>组件实现注释功能？

DevOps 小满

2026-7-9

解决react-pdf中组件使用报错问题

首先明确：react-pdf的<Note>组件不能直接放在<View>里使用，它是PDF文档的注释元素，必须依附于PDF文档内容（比如已加载的PDF文件或者你用react-pdf生成的PDF结构），而不是单独在View中渲染。

正确使用场景与示例

1. 给生成的PDF内容添加注释

如果你是用react-pdf生成PDF（比如使用<Document>、<Page>、<Text>等组件构建PDF），可以在内容元素内部嵌套<Note>：

import { Document, Page, Text, View, Note } from '@react-pdf/renderer';

const MyPdf = () => (
  <Document>
    <Page size="A4">
      <View>
        <Text>
          这是一段带注释的文本
          <Note>这里是文本的注释内容，会作为PDF的批注显示</Note>
        </Text>
      </View>
    </Page>
  </Document>
);

这种场景下，<Note>是作为PDF内容的一部分被渲染，不会出现“No PDF file specified”错误。

2. 给已加载的外部PDF添加注释

如果你是用react-pdf的查看器组件（比如<Viewer>）展示外部PDF，要添加注释需要结合查看器的API，而不是直接用<Note>组件。<Note>仅适用于生成PDF的场景，查看器的注释功能需要通过onDocumentLoadSuccess获取文档实例后操作：

import { Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

const PdfViewerWithNotes = () => {
  const handleDocumentLoad = (document) => {
    // 通过document实例添加注释，具体API参考react-pdf的文档
    const page = document.getPage(1);
    page.addAnnotation({
      type: 'text',
      content: '这是添加的注释',
      position: { x: 50, y: 50 },
    });
  };

  return (
    <Viewer fileUrl="/your-pdf-file.pdf" onDocumentLoadSuccess={handleDocumentLoad} />
  );
};