React embedding PDF using react-pdf not working

Question

I'm trying to use react-pdf to render a pdf document. I have a react app generated by create-react-app. I have followed the instructions mentioned in the github readme for CRA (https://github.com/wojtekmaj/react-pdf#create-react-app).

import { Document, pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

I have placed a sample PDF file in ./public/dummy.pdf.

And it is accessible at

I am using the Document component as below but nothing gets rendered on the page.

<Document file="http://localhost:3000/dummy.pdf" />

This is what it looks like in React DevTools for Chrome

What am I missing?

Bless · Accepted Answer · 2020-08-25 07:53:33Z

5

Document component mostly deals with fetching the PDF and managing loading/error states. To render the pages of the PDF, you need to render Page component passing the corresponding page number.

Slightly modified version of the example taken from Usage section to render all pages of the PDF:

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

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

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

  return (
    <div>
      <Document
        file="dummy.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        {[...Array(numPages).keys()].map((p) => (
          <Page pageNumber={p + 1} />
        ))}
      </Document>
    </div>
  );
}

edited Aug 25, 2020 at 7:53

answered Aug 25, 2020 at 7:42

Bless

5,4002 gold badges44 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kenny John Jacob Over a year ago

So we need to go through it page by page, or does all pages get rendered?

Bless Over a year ago

If you want to render all pages of the PDF, you need to render Page component for each page passing the page number as prop.

Kenny John Jacob Over a year ago

Great, I'll give it a try! Thanks ☺️

Wojciech Maj Over a year ago

Make sure to visit Recipes wiki, often overlooked part of React-PDF documentation, which handles most popular use cases: github.com/wojtekmaj/react-pdf/wiki/Recipes

Collectives™ on Stack Overflow

React embedding PDF using react-pdf not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related