Display PDF in reactJS

If you goal is just to view the pdf in your application, the easiest way is using the object tag in HTML. You don't need to import any libraries and works most of the browsers. But this is lack of customization and styles.

  <object data="http://africau.edu/images/default/sample.pdf" type="application/pdf" width="100%" height="100%">
      <p>Alternative text - include a link <a href="http://africau.edu/images/default/sample.pdf">to the PDF!</a></p>
  </object>

Try this You can easily display a PDF in React using the native tag. Just set the data attribute to your PDF URL and define width and height as needed.

✅ No need for extra libraries — works well for simple use cases.

<object width="100%" height="400" data="http://www.africau.edu/images/default/sample.pdf" type="application/pdf">   </object>

I solved the problem. I convert the binary data that I received from backend into ArrayBuffer.

axios.post(//fire your API).then(response =>
        (response.status === 200? response.data : null))
    .then(pdfdata => {
        var len = pdfdata.length;
        var bytes = new Uint8Array( len );
        for (var i = 0; i < len; i++){
            bytes[i] = pdfdata.charCodeAt(i);
        }

        const renderPdf = bytes.buffer

Then I actually assign bytes.buffer to renderPDF to perform the rendering. Now it is working flawlessly!

In rendering html from react,

import PDF from 'react-pdf-scroll'
<PDF file={renderPdf} scale={1.3} pages={Infinity} />

if your data that is returned from the backend is in the format of buffer then you can set the file info with a parsed JSON object that react-pdf can configure.

file={{data: JSON.parse(renderPDF).data}}

This will render your PDF file.

Expanding the answers posted above this works when using a pdf string

<object data={`data:application/pdf;base64,${base64_pdf_string}`} type="application/pdf" width="100%" height="100%">
      <p>Alternative text</p>
</object>

import { Document, Page } from "react-pdf/dist/esm/entry.webpack";

That will fix your problem. It worked for me

<iframe src="https://docs.google.com/viewer?url=YOUR_PDF_URL&embedded=true" frameborder="0" height="500px" width="100%"></iframe>

In the above iframe, in the src (replace YOUR_PDF_URL), which will work.

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

          <div style={{marginLeft:"27%"}}>
            <Document file={fileUrl} onLoadSuccess={onDocumentLoadSuccess} >
              <Page pageNumber={pageNumber} />
            </Document>
            <p style={{marginLeft:"27%"}}>
              Page {pageNumber} of {numPages}
            </p>
          </div>

This will load your pdf make you give the proper URL or data and check https://www.npmjs.com/package/react-pdf

This is a very old issue causing pdf to get hidden on mobile devices.

Ive tried

<object width="100%" height="400" data="http://www.africau.edu/images/default/sample.pdf" type="application/pdf"></object>

Even this doesn't work

Finally found a working solution

<iframe src={pdf_url} />

Hope This works.

Nice day coding!

well other than using Document and page from react-pdf . You also need to use pdfjs. I don't know what or how it does but after using pdfjs . I could load my pdf. Just do

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

and then

 <Document file={pdf} className="d-flex justify-content-center">
        <Page pageNumber={1} scale={width > 786 ? 1.7 : 0.6} />
      </Document>