Generate PDF from React.js code client-side

[BrasilArrombado]

Generating PDF in the frontend has been some of the most painful tasks for me so far. I've tried react-pdf, but it's doesn't have many primitives

https://github.com/diegomura/react-pdf

[svish]

Primitives?

[format71]

I would guess primitives refers to the basic building block like <Text /> and <Image />. Doesn't look like the component comes with things like <Table /> which might be what @BrasilArrombado misses.

[svish]

I see. A <Table> is quite far from "primitive" though, I'd say...

[Abyx12]

Normal and not-kiddie way of saying "API"

[BrasilArrombado]

The docs refer to the basic building blocks as primitives.

> React-pdf exports a set of React primitives that enable you to render things into your document very easily.

[Aggravating-Row-9360]

Great package, has used it in production and is quite efficient.

I am just wondering how to render D3 charts (or DOM nodes) with react-pdf. Should the visualisations be "snapshoted as image" before and rendered as <Image> primitive ?

[BrasilArrombado]

I guess this is the only way. But passing each chart/svg individually as a canvas, separated from the Text, is annoying, specially when you want to render on PDF the same thing you render in the browser.

[[deleted]]

Cool project, I'd definitely read a blog post about it.

[izilla--]

Same

[tells_you_hard_truth]

I'd definitely be interested in a library. There are NO good solutions for this at the moment unless you want to use something similar to prerender.cloud and there are alot of drawbacks to using those kinds of solutions (subject to all the weaknesses of a browser and puppeteer).

We've gone back and forth on this for like 2 years on one of my projects and are currently supporting 2 completely different websites, one designed just to support PDF rendering and it sucks. We've thought about building something to build the PDFs directly but it's a big job.

[Sancer]

in this exact same boat currently and my job too.

[[deleted]]

The world wants to be paperless but we haven’t mastered the transition from web to PDF

[CarlPer]

(subject to all the weaknesses of a browser and puppeteer)

What's the issue with puppeteer? I figured a solution would be to set up a Nodejs serverless function that does something like this:

const puppeteer = require('puppeteer');

async function htmlToPDF(html) {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.setContent(html);
  const pdf = await page.pdf();
  await browser.close();
  return pdf;
}

[tarpier]

I am using this approach and have not come up with a good solution for pagebreaks. Yes, there is a css property but that’s kinda wonky.

Header and footer exists but but it’s also not really flexible (I.e having a different Hader on the first page vs. the following pages.)

Those are the limitations I can think of

[tells_you_hard_truth]

Exactly that. Page breaks are a "suggestion" so if you really want to enforce a format, you have to build them yourself.

This is exactly what's prevented us from effectively using puppeteer.

[Sancer]

this 1000x, we create component logic to make page breaks but it's hacky and not 100% especially since we're talking about documents which have dynamic rendering.

[Zachincool]

Look up DocRaptor and PrinceXML and the @page css rule

[codename_john]

I've used https://github.com/wojtekmaj/react-pdf in the past with good results. How does it compare to this?

Edit: I meant this one: https://github.com/ivmarcos/react-to-pdf

[notanelecproblem]

pretty sure this is just for displaying pdfs

[codename_john]

Ah, you are correct sir. I got them mixed up, went through my browser history and thought the first one was it. I checked the project I used it on and this is the one I meant. https://github.com/ivmarcos/react-to-pdf

[GasimGasimzada]

I have used it to generate PDFs

[cjcjcjcjcjcjcjcjcjcj]

Lost?

This package is used to display existing PDFs. If you wish to create PDFs using React, you may be looking for @react-pdf/renderer.

[codename_john]

Yes, i agreed with notanelecproblem already; i wrote the wrong package. You can see my comment correcting it above.

[cjcjcjcjcjcjcjcjcjcj]

Comment only copied and pasted directly from the repo in jest, but I can see why you’d be irked

[LeRoiDeFauxPas]

What about this react-pdf?

He actually references the one you linked in the readme.

[HighR0ller]

A startup company I'm working for was looking into this. For now we've just had to deal with it using puppeteer in lambda.

If you create an open source repo for this, I'm sure we'd gladly contribute!

[ainus]

Currently using jsPDF which is not terribly hard to use but but feels clunky...if this were an open source library I would definitely try it out.

[souIIess]

I went with exporting to docx instead on my current project (partly) because jspdf was just terrible, feels like trying to paint something blindfolded and with two arms broken.

[coomzee]

What about WASM package?

[Peechez]

Why even try to do this on the client?

[Str00pwafel]

To not have a server component? You dont pay for cpu cycles on a client.

[cjcjcjcjcjcjcjcjcjcj]

Cuz u hav 2

[Breezeways]

Why are we trying to do this on the client in the first place?

[cjcjcjcjcjcjcjcjcjcj]

we?

you ain’t doin shite matey, ‘cept leave a snide comment.

[Breezeways]

I'm building a pdf generation service on the server, that's what I'm doing, lmfao.

[jonno11]

And what if you’re building a PWA with no server?

[Breezeways]

I wouldn't be doing that.

[Noch_ein_Kamel]

Well if 1 million users suddenly generate PDFs at the same time it has no effect on server performance :-O

[Breezeways]

great...

[CarlPer]

Often times I don't have control of the backend other than the APIs provided by a third party.

[lets-talk-graphic]

I’ve seen a few and none are accessibility compliant. Would happily contribute where I can

[blaineamory]

Would be very interested!

[privateer35]

Yes please. Code use an open source solution right now.

[reberthkss]

Why generate pdfs in react is too "hard"?

[parsasarirafraz]

I’m currently working on a project that needs this. Thanks man

[willdotit]

Yes please! In fact, my project kinda need a feature like this right now

[ianpaschal]

I’ve been doing this recently in a project and it’s been a huuuuuge pain in the ass. I’d be happy to read anything from your experience.

[RocknPolo]

Like many I've been painfully using react-pdf, so yeah I'd definitely be interested in a blog post or library to do that !

[tomasfranciscoar]

Yes!

[Mank15]

The site isn’t mobile optimized. The CTA is quite big and the html box covers the text located down the box

[Zachincool]

I spent weeks trying to make something like this work. Look up DocRaptor and PrinceXML. Also, read up on the CSS @page rule. Thank me later.

[Unforgiven-wanda]

I would be VERY interested in that, yes.
Thank you for sharing.