React-PDF中禁用AnnotationLayer无效，PDF预览出现空白页求助

你遇到的问题核心是**renderAnnotationLayer属性的作用对象错误**，以及部分场景下需要通过CSS强制清除注释层残留样式。以下是可行的解决步骤：

1. 修正组件属性传递 #

在React-PDF的v5+版本中，renderAnnotationLayer是<Page>组件的专属属性，而非<Document>组件。你之前把它写在<Document>上不会生效，需要将其移到每个<Page>实例中：

function PDFPreview({ url }) {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  const fileUrl = url;

  return (
    <Stack>
      <Document
        file={fileUrl}
        onLoadSuccess={onDocumentLoadSuccess}
      >
        {Array.from(new Array(numPages), (el, index) => (
          <Page 
            key={`page_${index + 1}`} 
            pageNumber={index + 1}
            renderAnnotationLayer={false} // 移到Page组件上生效
          />
        ))}
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </Stack>
  );
}

2. 强制清除注释层样式（兜底方案） #

如果上述属性调整后仍有空白页残留，大概率是注释层的DOM元素虽未渲染内容，但仍保留默认样式占位。可以通过全局CSS强制隐藏相关类：

.annotationLayer {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

额外说明 #

• options={{ disableAnnotationRendering: true }}是pdf.js底层配置，在React-PDF中无需单独设置，正确传递renderAnnotationLayer={false}给Page组件即可生效。
• 若你的React-PDF版本低于v5，API可能存在差异，建议先确认版本并参考对应文档调整。

内容的提问来源于stack exchange，提问作者tea-codes