CODEWITHSUNDEEP
javascriptreactjspdfjspdfhtml2canvas
Stefano Martell Travezan
Stefano Martell Travezan

Reputation: 41

Generate dynamic PDF with React

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

  1. @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.

  2. 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!)

  3. 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!

Upvotes: 2

Views: 5741

Answers (3)

hitesh
hitesh

Reputation: 11

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.

Upvotes: 0

Ika
Ika

Reputation: 406

Google's Puppeteer is a Node API that allows you to control an instance of Chrome using a Node service. Leveraging this technology, you could generate PDFs using any Javascript framework ( React included ).

For detailed step-by-step guide see: https://www.pdftron.com/blog/react/react-to-pdf And the related open-source project https://github.com/PDFTron/web-to-pdf

Upvotes: 1

Quentin C
Quentin C

Reputation: 1893

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?

Upvotes: 0

Related Questions