Blank white page when rendering PDF from a Base64 URL

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

I’ve followed this guide, and supplied a valid base64, but my PDF doesn’t render, just a white page with no errors at all.

Steps to reproduce

1. Fetched a PDF from a REST API as a UTF-8 encoded string.
2. Converted the UTF-8 PDF String to base64 using a helper function below. export function getBase64FromUTF8(str: string | number | boolean) { return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) { return String.fromCharCode(parseInt(p1, 16)); })) }
3. Supplied the base64 to file as suggested here.

Expected behavior

A Proper PDF file render.

Actual behavior

Additional information

No response

Environment

• Browser (if applicable) = Google Chrome Version 109.0.5396.2 (Official Build) dev (64-bit):
• React-PDF version = ^5.7.2:
• React version = 17.0.2:
• Webpack version (if applicable):

[f0-x]

Tx @wojtekmaj I get you now. I was able to fix my issue by directly piping the API response (binary) to the <Docujment file=...> and it worked. Thank you for your time. ✌

[f0-x]

Hi @wojtekmaj are you saying it is no longer necessary to prefix our base64 string with data:application/pdf;base64, when supplying it to <Document file=...>?

When I supply my base64 to file without data:application/pdf;base64,, I see a network request to that long base64 string instead. I’m confused sorry.