react-pdf组件额外显示PDF文本内容的问题求助

使用react-pdf展示PDF文件时，遇到PDF图像下方额外显示提取出的文本内容的问题，仅希望保留PDF本身的展示。通过开发者工具定位到react-pdf__Page__textContent类，尝试用CSS设置display:none但未生效。

相关代码 #

Pdf.js #

import SinglePagePDFViewer from "../components/pdf/single-page";
import samplePDF from "../components/pdf/diy-find_mac_address.pdf";

  <>
    <Navbar />
    <div className="pdf-wrapper">
      <div className="pdf-viewer">
        <SinglePagePDFViewer pdf={samplePDF} />
      </div>
    </div>
  </>

single-page.js #

import React, { useState } from "react";
import { Document, Page } from "react-pdf";

export default function SinglePage(props) {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1); // 默认展示第一页

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

  function changePage(offset) {
    setPageNumber((prevPageNumber) => prevPageNumber + offset);
  }

  const { pdf } = props;

  return (
    <>
      <Document
        file={pdf}
        options={{ workerSrc: "/pdf.worker.js" }}
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={1} />
      </Document>
    </>
  );
}

问题截图 #

• 当前展示效果：
• 文本显示问题：
• 开发者工具查看：

已尝试创建Stackblitz示例，但不知如何添加PDF文件，求仅显示PDF的解决方法。

可行解决方法 #

1. 强制使用画布模式渲染 #

react-pdf默认会同时渲染画布层和文本层（用于文本选择、搜索等交互）。如果不需要这些交互功能，直接给<Page>组件添加renderMode="canvas"属性，即可只渲染PDF画布，不会生成文本内容层：

<Page pageNumber={1} renderMode="canvas" />

2. 提高CSS选择器优先级 #

如果需要保留文本层的交互能力但隐藏显示，需确保你的CSS选择器优先级高于react-pdf内置样式。可以结合父容器类名编写样式：

.pdf-viewer .react-pdf__Page__textContent {
  display: none !important;
}

将这段样式添加到全局样式文件，或者组件的CSS模块中。

3. 更新react-pdf版本 #

部分旧版本的react-pdf可能存在文本层渲染异常的bug，尝试更新到最新稳定版：

npm update react-pdf

内容的提问来源于stack exchange，提问作者Eric Andre