Loading PDF from Base64 data using react-pdf-js

Question

Currently I'm trying to load a PDF using base64 data with this React component react-pdf-js.

I am currently recieving a PDFDocument: stream must have data error when trying to load the PDF in the following manner:

   <PDF
      file={`data:application/pdf;base64,${this.state.base64}`}
      onDocumentComplete={this.onDocumentComplete}
      onPageComplete={this.onPageComplete}
      page={this.state.page}
    />

I have had success loading a PDF onto the page using this React component react-pdf, but the library did not have the ability to implement pagination. The code that worked for that componenet was as follows:

    <Document
      file={`data:application/pdf;base64,${this.state.base64}`}
    >
      <Page pageNumber={this.state.pageNumber} />
    </Document>

I was hoping someone would be able to help me figure out how to load a file using base64 using the react-pdf-js, or point me in a direction to implement pagination with react-pdf?

Any solution for react-pdf?

sometimes24
– sometimes24

2018-10-17 14:49:35 +00:00
Commented Oct 17, 2018 at 14:49 — sometimes24
– sometimes24, Commented Oct 17, 2018 at 14:49

mirceta · Accepted Answer · 2020-05-17 22:36:55Z

4

You can use embed and it's fairly succinct.

return <embed src={`data:application/pdf;base64,${base64ContentString}`}  type="application/pdf" width="100%"></embed>

answered May 17, 2020 at 22:36

mirceta

412 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gert Hermans · Accepted Answer · 2019-10-11 06:49:00Z

2

I've been looking on how to do this as well, and found a way thanks to this entry: Creating a Blob from a base64 string in JavaScript the way to set the pdf file is something like this:

const byteCharacters = atob(response);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
const byteArray = new Uint8Array(byteNumbers);
this.state.pdf = new Blob([byteArray], {type: 'application/pdf'});

The document looks like this:

<Document file={this.state.pdf} > ...

Not sure if I am using state correctly here, I was using state hooks in my code.But using the blob should work.

answered Oct 11, 2019 at 6:49

Gert Hermans

8491 gold badge13 silver badges33 bronze badges

Collectives™ on Stack Overflow

Loading PDF from Base64 data using react-pdf-js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related