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.

<ReactPDF file={renderPdf}/>

But it displayed "Failed to load PDF file." I don't wish to save any file in local. The best approach is the display the pdf with the raw data provided by backend.

In terminal, it logged the error:

URIError: Failed to decode param '/%PDF-1.4%%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD%20ReportLab%20Generated%20PDF%20document%20http://www.reportlab.com1%200%20obj%3C%3C/F1%202%200%20R%20/F2%203%200%20R%20/F3%207%200%20R%3E%3Eendobj2%200%20obj%3C%3C/BaseFont%20/Helvetica%20/Encoding%20/WinAnsiEncoding%20/Name%20/F1%20/Subtype%20/Type1%20/Type%20/Font%3E%3Eendobj3%200%20obj%3C%3C/BaseFont%20/Helvetica-Bold%20/Encoding%20/WinAnsiEncoding%20/Name%20/F2%20/Subtype%20/Type1%20/Type%20/Font%3E%3Eendobj4%200%20obj%3C%3C/BitsPerComponent%208%20/ColorSpace%20/DeviceRGB%20/Filter%20[%20/ASCII85Decode%20/FlateDecode%20]%20/Height%20480%20/Length%2036803%20/SMask%205%200%20R%20%20%20/Subtype%20/Image%20/Type%20/XObject%20/Width%20640%3E%3EstreamGb%22-V'

@DanO %PDF-1.4 %�� ReportLab Generated PDF document http://www.reportlab.com 1 0 obj << /F1 2 0 R /F2 3 0 R /F3 7 0 R >> endobj 2 0 obj << /BaseFont /Helvetica /Encoding /WinAnsiEncoding /Name /F1 /Subtype /Type1 /Type /Font >> endobj 3 0 obj << /BaseFont /Helvetica-Bold /Encoding /WinAnsiEncoding /Name /F2 /Subtype /Type1 /Type /Font >> endobj 4 0 obj << /BitsPerComponent 8 /ColorSpace /DeviceRGB /Filter [ /ASCII85Decode /FlateDecode ] /Height 480 /Length 36803 /SMask 5 0 R /Subtype /Image /Type /XObject /Width 640 >> stream..... — Mervyn Lee, Aug 09 '17 at 17:20

score 36 · Answer 1 · answered Jul 21 '20 at 13:29

36

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>

answered Jul 21 '20 at 13:29

Dhanuka Perera

1,395
3
19
29

1

this is perfect! thans – Loudrous Jun 18 '22 at 14:16
1

This works just fine when you just need to embed a PDF, thanks for sharing this answer! – Blake Nov 10 '22 at 15:43
1

iOS browsers have a bug that prevents scrolling with this object embed approach – Alex von Brandenfels May 15 '23 at 17:16

score 14 · Accepted Answer · answered Aug 09 '17 at 17:46

14

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

answered Aug 09 '17 at 17:46

Dan O

6,022
2
32
50

Tried with first option with data: {renderPdf} which will trigger error. 2nd option is not possible since it will trigger a get request, while my backend perform some sort of authorization which will send a POST request to retrieve the pdf – Mervyn Lee Aug 09 '17 at 17:55

score 6 · Answer 3 · answered Jun 17 '19 at 12:27

6

Try this

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

answered Jun 17 '19 at 12:27

Nikit Barochiya

971
11
14

it downloads. doesn't render. – Ajit T Stephen Aug 31 '23 at 15:05

Mervyn Lee · Answer 4 · 2017-08-25T03:19:29.577

3

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

edited Aug 25 '17 at 03:19

answered Aug 10 '17 at 04:22

Mervyn Lee

1,957
4
28
54

Hi @MervynLee - Can you please post the full code for your solution? – JoeyHolloway Aug 24 '17 at 08:33
Hi @JJHolloway, I have posted the code for logic and rendering part in react, anything else? – Mervyn Lee Aug 25 '17 at 03:19
Thanks @MervynLee -- did you come across an issue where it just says "Loading PDF file..." and never loads the PDF? – JoeyHolloway Aug 25 '17 at 11:58
@JJHolloway do you mind show the response content returned by server? – Mervyn Lee Aug 27 '17 at 08:09
4

The library react-pdf-scroll has been deprecated according to the npm website https://www.npmjs.com/package/react-pdf-scroll – Hoppe Mar 28 '18 at 20:09

score 1 · Answer 5 · answered May 14 '19 at 00:17

1

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.

answered May 14 '19 at 00:17

Willie Smith

11
2

Rucksolly · Answer 6 · 2022-11-28T11:10:30.657

1

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

That will fix your problem. It worked for me

edited Nov 28 '22 at 11:10

answered Nov 28 '22 at 11:09

Rucksolly

11
2

score 0 · Answer 7 · answered Jan 27 '23 at 10:09

 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

score -1 · Answer 8 · answered Jun 09 '21 at 20:27

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!

score -1 · Answer 9 · answered May 30 '22 at 06:53

-1

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>

answered May 30 '22 at 06:53

Simon

723
8
14

Naveen Kamath · Answer 10 · 2022-06-16T15:45:49.450

-1

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

edited Jun 16 '22 at 15:45

answered Jun 15 '22 at 07:11

Naveen Kamath

49
6

Display PDF in reactJS

10 Answers10

Linked