question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Base64 image string does not work with PDFDownloadLink

See original GitHub issue

Describe the bug PDFDownloadLink does not support having an Image component with base64 string data of the image as it’s source.

To Reproduce Steps to reproduce the behavior including code snippet (if applies):

  1. Use the toBase64Image() provided in Chart.js library to export a chart as base64 string. The output looks like the following: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABWAAAAK...

  2. In the impl of the document associated to PDFDownloadLink, I am doing this: <Image src={{data:<base64 string data>, format: 'png'}}></Image>.

  3. Don’t see the image added to the pdf and the entire pdf css is broken now.

Expected behavior Expected to see the chart inserted as an Image component in the downloaded pdf.

Desktop (please complete the following information):

  • OS: MacOS
  • Chrome, Safari
  • React-pdf version : npm list --depth=0 | grep react-pdf ├── @react-pdf/renderer@1.6.12 ├── react-pdf@5.0.0

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
ze-gomescommented, Feb 14, 2021

It worked for me like this:

const base64imgString = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABWAAAAK..."

....

<Image src={base64imgString} allowDangerousPaths="true"></Image>
3reactions
outparkcommented, Oct 3, 2021

any solution to this? this is still not fixed. Using base64 image still does not work with PDFDownloadLink.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Save base64 string as PDF at client side with JavaScript
So here my problem: I have a pdf file as a base64 String that i am getting from the server. I would like...
Read more >
Base64 - MDN Web Docs Glossary: Definitions of ... - Mozilla
Base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a ......
Read more >
Components - React-pdf
A React component for displaying network or local (Node only) JPG or PNG images, as well as base64 encoded image strings.
Read more >
PDF-Export does not work with base64-strings - Syncfusion
Hi,. unfortunately the pdf export does not work with a base64 converted .png image. We worked with both online converters and functions...., but...
Read more >
react-pdf - npm
Display PDFs in your React app as easily as if they were images. Lost? This package is used to display existing PDFs. If...
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