Display PDF in reactJS

Question

I am following this package https://www.npmjs.com/package/react-pdf

I got the entire raw pdf data from backend so I was trying with code below.

Answer 1

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

Answer 2

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.

Answer 3

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>

Answer 4

Try this

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

Answer 5

it looks like you're passing the PDF data directly to the <ReactPDF> component as the value of the file prop. But according to the docs you need to use an object containing a data property:

<ReactPDF
  file={{
    data: renderPdf
  }}
/>

it seems you can also set file to an object containing a url property, to let ReactPDF fetch the pdf from your backend by itself, if that's easier:

<ReactPDF
  file={{
    url: 'http://www.example.com/sample.pdf'
  }}
/>