Blank white page when rendering PDF from a Base64 URL

See original GitHub issue

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

image

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

Issue Analytics

  • State:closed
  • Created 10 months ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
f0-xcommented, Nov 9, 2022

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. ✌

0reactions
f0-xcommented, Nov 9, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Base64 PDF in new tab shows Blank Page before Refresh
I have a base64 pdf string which I append to: data:application/pdf;base64,. The pdf is brought into a new tab using a link in...
Read more >
Solved: PDF Returned from HTTP Response is Blank
I suspect the problem is that the server is not returning the PDF file correctly, although the problem could instead or also be...
Read more >
Repair Base64 | Tools
When i get this text which i think it is base64 and i try to create a pdf file. the file it is...
Read more >
Troubleshoot viewing PDF files on the web
Solutions to common issues viewing PDFs from a website. Common issues with viewing PDFs. A blank page in the web browser; A red...
Read more >
getContent returns PDF that consists of blank pages
If I use the URL of the page directly and supply some parameters, it works brilliantly. Embedded images, the Arial font, even a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found