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

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

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.

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!

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>

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