Is there a way to take a section of a page and convert it to PDF?

[Ben-CA]

Is there a way to take an existing React page (or section of it) and convert it to PDF?

So like if I have a complex group of React / MUI Components that represents a quote for instance - I can "virtual print" that section as a PDF easily in Chrome.

But I'd like to skip the "print" step and just provide a "Download PDF" button directly that essentially provides that. But I don't want to have to re-style the entire thing using React-PDF syntax.

Is there a way to do this?

[pinuya]

react-pdf does not directly support rendering existing react components (like MUI components) to a PDF without restyling them, because it uses a separate rendering engine, there are alternative approaches to accomplish this with minimal styling overhead

no backend required, minimal setup: html-to-image + jspdf
generates PDF directly, simple setup: dom-to-pdf

[Ben-CA]

The issue with using something like html-to-image or dom-to-pdf is that the resulting PDF:

• File size jumps much larger
• Quality is lower (text less sharp)
• Can't copy and paste out of it
• Not accessible for screen readers, etc.

Those are fairly significant drawbacks.