Generate dynamic PDF with React

Question

how can I generate a PDF with React that accepts styling and allows me not to show the content on the page? I want to display a link (probably an a tag) on my app that generates a PDF and shows it instantly on a new tab. I have tested the following packages and here's my take on them: (I can't find a method to fit my needs).

@react-pdf/renderer: Does the job but has a couple drawbacks: 11s loading time (source: Bundlephobia) and uses primitives (View, Image, Text) so the styling is a bit different.
jsPDF: Awesome library but doesn't support CSS. Its styling is too declarative and repetitive. (If someone could explain how to handle my situation with this styling it would be more than welcome!)
html2canvas: Used in conjunction with jsPDF. This method first takes a screenshot of the page, then generates a PDF with the newly created image (jpg or png). Really usefull, but in this case it throws me an error when I don't show in the page the actual 'things' I want to show in the PDF, and, as I tell you, my goal is to only displaythe a tag.

So what's your take on this? What should I do?

Thanks a lot!

I am almost in same situation , except I need to open a pdf in separate window on lick of link.Can you please let me know what approach you followed? — Khushi
– Khushi, Commented Jul 22, 2020 at 16:12

Quentin C · Accepted Answer · 2019-03-07 16:06:34Z

0

I use pdfMake in my backend and display the pdf with google doc:

        <iframe
          title="title"
          src={`https://docs.google.com/gview?url=${docUrl}&embedded=true`}
          style={{ height: "100%", width: "100%" }}
        />

Loading time is also a bit of an issue here. Are you trying to convert HTML directly to a PDF?

answered Mar 7, 2019 at 16:06

Quentin C

1,89317 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stefano Martell Travezan Over a year ago

Thanks quentin. What I'm looking for is to either convert HTML to PDF or HTML to JPG to PDF, but with the following conditions: if it is HTML to PDF, the PDF should accept CSS. If it is the second way, I do not want to display the html to be converted into PDF in the page, only an a tag.

Quentin C Over a year ago

Ok I see, my solution would not work for your use case. I am also interested by a potential solution

hitesh · Accepted Answer · 2021-03-30 06:04:59Z

0

I found this library - pdfmake. It allows us to design pdf and it have it's own styling and we can dynamically pass the data using this library. I implemented this in ReactJS.

answered Mar 30, 2021 at 6:04

hitesh

114 bronze badges

Collectives™ on Stack Overflow

Generate dynamic PDF with React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related