“react-pdf”显示在 PDF 中找到的文本而不是 PDF 本身？

https://www.npmjs.com/package/react-pdf https://www.npmjs.com/package/react-pdf

我正在使用这个包来尝试显示 PDF 文件。

这是我当前显示的 PDF：

https://i.stack.imgur.com/uF4ER.png https://i.stack.imgur.com/uF4ER.png

正如你在这个屏幕截图中看到的，

https://i.stack.imgur.com/XSBE3.png https://i.stack.imgur.com/XSBE3.png

从 PDF 中提取文本并显示在 PDF 图像下方。我不想要这个。我只想要PDF。

这就是它在开发检查器中的样子

https://i.stack.imgur.com/Jb3x0.png https://i.stack.imgur.com/Jb3x0.png

有一个我不想包含的“react-pdf__Page__textContent”类。我已经尝试创建一个 CSS 类并且不显示这样的内容：

  .react-pdf__Page__textContent{
    display: none;
  }

但这不起作用，文本仍然出现。

我不知道文本来自哪里，因为我没有在代码中的任何位置包含“textContent”。这是我用来渲染 PDF 的代码。

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>
  </>

单页.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); //setting 1 to show fisrt page

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

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

  // function previousPage() {
  //   changePage(-1);
  // }

  // function nextPage() {
  //   changePage(1);
  // }

  const { pdf } = props;

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

有人以前用过这个包吗？有什么帮助吗？如何仅显示 PDF，而不显示其下方的“文本内容”？

EDIT:

尝试创建一个 Stackblitz 示例，但不知道如何将 PDF 与 stackblitz 一起使用。如果您知道如何操作，此 stackblitz 将复制该问题：

https://stackblitz.com/edit/react-qkbqgf?file=src/App.js https://stackblitz.com/edit/react-qkbqgf?file=src/App.js

有类似的问题。您可以通过将 textlayer css 导入到文件中来修复它：

import "react-pdf/dist/esm/Page/TextLayer.css";

这对我来说摆脱了文字。

如果这不起作用，您也可以在<Page/>组件通过将其设置为 false 尽管我不建议这样做。

<Page pageNumber={1} renderTextLayer={false} />