React-pdf: passing in just a base 64 data set is not working.. nor a blob

[rchancey]

Is there a way to just pass in the blob of data? And not have to download anything?

I have the base64 data in hand.. just want to pass it to the report.. and it keeps saying 403 and not able to download the file.

Failed to load resource: the server responded with a status of 403 (Forbidden).. something with pdf workers.

I don't need it to download .. I need it to process the base64 content or I can leave it encoded.. any ideas?

[rchancey]

I tried this:

const file = new Blob([report], { type: 'application/pdf' });
const fileUrl = URL.createObjectURL(file);

file={{ data: fileUrl }}
onLoadSuccess={this.onDocumentLoadSuccess}
loading={'Please wait, the document is loading!'}
onLoadError={console.error}
/>

and get this error:
details: "Error: The API version \"2.1.266\" does not match the Worker version \"2.3.200\"."

[rchancey]

@wojtekmaj a lot of us are trying to pass in a base64 document.. not from a URL.. not all apps allow download from URLS.. If you could provide an example it would help quite a few of us..

[wojtekmaj]

You can't just pass base64 as an URL. You need to prefix it with data:application/pdf;base64,, otherwise it's not a valid URL. A good way to check if it's gonna work or not is just paste the URL you created in the browser and see if it opens or downloads a valid PDF.

[wojtekmaj]

@rchancey the error with versions not matching is unrelated. You configured React-PDF worker wrongly. Perhaps you hardcoded the worker version, or forgot to update manually hosted worker after React-PDF update.

[rchancey]

@wojtekmaj I did not configure a PDF worker. but I use the below

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

report = "data:application/pdf;base64," + report
`
 <Document file={report}/>
`

I made the change you suggested the pdf is blank.. no error

and the data buffer does work when I paste into the browser standalone

am I setting the file incorrectly?.. because no content is rendered. I assume do not have to have a Page element right? Again no errors.. just blank page.. no content

[wojtekmaj]

Absolutely no idea based on the information you have me.

• Use onSourceError, onLoadError to be informed about errors when loading the file.
• Make sure to render at least one <Page /> inside <Document />.
• If this isn't helpful, send me full exact example of what ends up in file prop.

[rchancey]

WOOT!! that worked. I guess I needed to have a Page element inside the document.

so the trick was adding the "data:application/pdf;base64," as the prefix to the bas64 content, and adding a Page element with a default pageNumber to the Document.

Thanks @wojtekmaj for the help.. I did have a question on the width but will ask that separatly