react-pdf failing to render base64 PDF data, interpreting as hex string

Question

I'm trying to use the react-pdf library to display a base64 encoded PDF file. The B64 data is accurate, as it loads in an iframe as such:

 <iframe
   className={css.previewIframe}
   src={`data:application/pdf;base64,${
     this.props.encodedPdf
   }`}
 />

However, if I insert the data into a react-pdf document as such, I get an error:

<Document file={this.props.encodedPdf} />

The Document is rendered with an error message Failed to load PDF file., and the console logs the following error: InvalidPDFException {name: "InvalidPDFException", message: "Invalid PDF structure"}

I also get a lot of warnings like the following: Warning: Ignoring invalid character "109" in hex string

The documentation clearly states that the file prop can be B64 encoded content. Any idea on what the issue could be? Here is the B64 data if needed:

JVBERi0xLjMKMSAwIG9iago8PAovS2lkcyBbIDMgMCBSIF0KL1R5cGUgL1BhZ2VzCi9Db3VudCAxCj4+CmVuZG9iagoyIDAgb2JqCjw8Ci9Qcm9kdWNlciAoUHlQREYyKQo+PgplbmRvYmoKMyAwIG9iago8PAovQ29udGVudHMgNSAwIFIKL1JvdGF0ZSAwCi9UeXBlIC9QYWdlCi9SZXNvdXJjZXMgPDwKL1Byb2NTZXQgWyAvUERGIC9UZXh0IF0KPj4KL0Nyb3BCb3ggWyAwIDAgNjEyIDc5MiBdCi9QYXJlbnQgMSAwIFIKL01lZGlhQm94IFsgMCAwIDYxMiA3OTIgXQo+PgplbmRvYmoKNCAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovUGFnZXMgMSAwIFIKPj4KZW5kb2JqCjUgMCBvYmoKPDwKL0xlbmd0aCAxMAovRmlsdGVyIC9GbGF0ZURlY29kZQo+PgpzdHJlYW0KSIkCCDAAAAAAAQplbmRzdHJlYW0KZW5kb2JqCnhyZWYKMCA2CjAwMDAwMDAwMDAgNjU1MzUgZiAKMDAwMDAwMDAwOSAwMDAwMCBuIAowMDAwMDAwMDY4IDAwMDAwIG4gCjAwMDAwMDAxMDggMDAwMDAgbiAKMDAwMDAwMDI3MyAwMDAwMCBuIAowMDAwMDAwMzIyIDAwMDAwIG4gCnRyYWlsZXIKPDwKL1NpemUgNgovUm9vdCA0IDAgUgovSW5mbyAyIDAgUgo+PgpzdGFydHhyZWYKNDAzCiUlRU9GCg==

If I add data:application/pdf;base64, to the beginning of the string, there are no errors, but also nothing is rendered.

Solution

The issue was:

1. I needed data:application/pdf;base64, in front of the string
2. I did not have a component inside of my component. See https://github.com/wojtekmaj/react-pdf/issues/203

Comments

[codeepic]

Thanks a lot - this is exactly what we need.