4

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

I'm using this package to try to display a PDF file.

This is the PDF i'm currently displaying:

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

and as you can see in this screenshot,

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

the text is extracted from the PDF and displayed under the image of the PDF. I don't want this. I just want the PDF.

This is how it looks in the dev inspector

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

there's a "react-pdf__Page__textContent" class that I don't want included. I already tried creating a CSS class and displaying none like this:

  .react-pdf__Page__textContent{
    display: none;
  }

but that didn't work and the text is still appearing.

I don't know where the text is coming from because I don't include "textContent" anywhere in the code. This is the code I'm using to render the 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>
  </>

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); //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>
    </>
  );
}

Has anybody used this package before? Any help? How do I display the PDF only, without the "text-content" below it?

EDIT:

Tried to create a Stackblitz example but IDK how to use PDF's with stackblitz. If you know how, this stackblitz will replicate the issue:

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

Eric Andre
  • 204
  • 2
  • 9

3 Answers3

13

Had a similar issue. You can fix it by importing the textlayer css to the file:

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

This got rid of the text for me.

If that doesn't work, you can alternatively disable the textlayer prop in the <Page/> component by setting it to false although I wouldn't recommend that.

<Page pageNumber={1} renderTextLayer={false} />
okaycodes
  • 131
  • 5
7

You may not need import "react-pdf/dist/esm/Page/TextLayer.css", but you can add import "react-pdf/dist/esm/Page/AnnotationLayer.css". Then add <Page pageNumber={1} renderTextLayer={false} />

renderTextLayer={false} is the one that removes extra text. AnnotationLayer.css remove the extra space that would appear below the pdf

Daminda Dinesh
  • 71
  • 2
0

Add the two options to remove the text:

<Page renderAnnotationLayer={false} renderTextLayer={false} />

No need to import the css for this.

David Alford
  • 2,044
  • 3
  • 12
  • 35