React-pdf: How to load a file using Base64?

I already figure it out it is like: file={data:application/pdf;base64,${<actual PDF base64 content here - starts with JVBER....> }}

I my case I've got content of pdf file as %PDF and, as it includes non-latin1 characters I cannot convert it to base64.

@gshilin, you're reading binary file as a text file. That's a no-no :)

Actually I receive it from server (not node)

It doesn't matter what the source is. If you receive it from URL, then you should pass URL to file prop and you are done. If you want to read it yourself for some reason, you need to read it properly as a binary file.

I have the same question as alphiii, I read that it was possible to give the file prop a base64 string, but I can not get it to work... I tried his soultion, as you can se below:

<Document file="data:application/pdf;base64,JVBERSGVsbG8gV29ybGQh" onLoadSuccess={this.onDocumentLoad} > <Page pageNumber={this.state.pageNumber} /> </Document>

But this just generates "Failed to execute 'atob' on 'Window".. Is it something more I have to add/change in order to get it to work? :)

@AdamOlevall, please provide me full error (with error stack) as well as your React-PDF version.

I get the following error stack when using file="data:application/pdf;base64,JVBERSGVsbG8gV29ybGQh" :

I updated React-PDF yesterday to 3.0.4

If that's really the whole thing you put in file prop, then the error is expected. JVBERSGVsbG8gV29ybGQh decodes to %PDE!]ɱ which certainly is not a valid content of PDF file as it should be :)

The easiest way to check if your PDF in base64 is valid is to paste the whole data:application... into your browser addres bar. If it "downloads" or opens the PDF, then you did it well.

On a side note, If you have a binary file, you don't need to encode it to base64. You can just pass it to file as is. It should be smart enough to figure it out.

Thanks for helping me out, the use of the browser address bar was a nice suggestion!
The base64 string I tried to use, SGVsbG8gd29ybGQ=, was the encoded string of "Hello world", and then I added the "JVBER" in front. Apperently that was something that it did not like. When I tried with a base64 string not generated by myself, it worked fine. Thanks once again :)

I was facing the same issue.
Thanks for the solution, but I also need to download this pdf file after the conversion like an invoice.
Thanks once again

After conversion? This library is just displaying PDFs, are you sure you got the right package?

Late to the party, but any ideas how can I use a base64 encoding to get an image inside of my Document? I have some Highcharts data in browser, and try to render it alongside other text on the client side. I successfully converted the Highcharts data to base64, but struggle to find a way to use it with react-pdf.

You can render anything within <Document>. <Document> just provides a context with a loaded PDF file to any <Page> components within.

I think you probably just need to update the documents with an example of using Base64. I ran into the same issue but didn't realise I need to add data:application/pdf;base64, - no doubt - down to my own stupidity:

<Document
          file={`data:application/pdf;base64,${fileBase64}`}
          onLoadSuccess={onDocumentLoadSuccess}
>

Perhaps in the User guide > Document > File - add the following:

Base64 encoded:
          `data:application/pdf;base64,${fileBase64}`
or 
          ...file={`data:application/pdf;base64,${fileBase64}`}

Underneath:

Parameter object:
{ url: 'http://example.com/sample.pdf', httpHeaders: { 'X-CustomHeader': '40359820958024350238508234' }, withCredentials: true }

Added more detailed instructions to Wiki.

You are awesome!!!

On Mon, 30 Mar 2020, 19:57 Wojciech Maj, notifications@github.com wrote:

Added more detailed instructions to Wiki
https://github.com/wojtekmaj/react-pdf/wiki/Frequently-Asked-Questions#how-do-i-load-a-pdf-from-base640
.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/wojtekmaj/react-pdf/issues/42#issuecomment-606180248,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ALR6J7CPG2U3KIRUFRN3RRTRKDTR3ANCNFSM4DVC3DLQ
.