How to load a file using Base64?

[alphiii]

The docs says that this lib supports base64 format, can some one show me an example.

[alphiii]

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

[gshilin]

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.

[wojtekmaj]

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

[gshilin]

Actually I receive it from server (not node)

[wojtekmaj]

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.

[AdamOlevall]

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? :)

[wojtekmaj]

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

[AdamOlevall]

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

I updated React-PDF yesterday to 3.0.4

[wojtekmaj]

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.

[AdamOlevall]

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 :)

[praveenkgoswami]

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

[wojtekmaj]

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

[abtx]

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.

[wojtekmaj]

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

[sbitproz]

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 }

[wojtekmaj]

Added more detailed instructions to Wiki.

[sbitproz]

You are awesome!!!

…

On Mon, 30 Mar 2020, 19:57 Wojciech Maj, ***@***.***> 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 <#42 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALR6J7CPG2U3KIRUFRN3RRTRKDTR3ANCNFSM4DVC3DLQ> .

[OOlashyn]

Hi @wojtekmaj ,
I have the issue when trying to use base64 - DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.". I even tried to use your example from Wiki, but still got the same error. Attached you can find full error stack. I am on the 5.3.0 version of react-pdf.
full-error-stack.txt

[Jahangiralamice]

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.

When I paste the whole base64 value into chorme browser its show my pdf file but face below this console error and pdf file can not show..
Its show Loading PDF.........

[Jahangiralamice]

Could anybody help me above error?

[Zeroxys]

@Jahangiralamice,I have the same log, did you find the solution ?

[BMwanza]

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 }

Thank you for this. I was inches away from giving up on this component.

The solution that is working for me is as follows:

import { Document, Page, pdfjs } from 'react-pdf'
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

....

<Document file={`data:application/pdf;base64,${contractPDF}`} onLoadSuccess={onDocumentLoadSuccess}>
    {Array.from(new Array(numPages), (el, index) => (
        <Page key={`page_${index + 1}`} pageNumber={index + 1} />
    ))}
</Document>

The server was returning dataapplication/pdfbase64 as the base64 prefix, and I assumed that it would work this way. However, the base64 prefix needs to be formatted as data:application/pdf;base64.

Using react-pdf@6.1.0