How to render a PDF in React

Viewed 363

I'm using react-pdf and according to their site it should display my PDF using this code

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

import PDF from "./123.pdf";

export default function Rosters() {
  return (
    <div className> <h1 className='text-light'>HELLO</h1>
      <Document file={PDF}>
        <Page pageNumber={1} />
      </Document>
    </div>
  );
}

The problem is my PDF is not being displayed and all I'm getting is "Failed to load PDF file" error enter image description here this happens in the site where the PDF should be being rendered.

I tried with different PDF files but none of them seem to work.

react-pdf documentation: https://github.com/wojtekmaj/react-pdf

1 Answers

If your pdfs are located anywhere in src then it won't work. Make sure you put them in the public folder.

Related