DEV Community

loading...

Discussion on: Generate a PDF from HTML with puppeteer

Collapse
vladejs profile image
Vladimir López Salvador

Lolly Post.

I understand your frustration.
In my case, I spent "One freaking Week" coding a serverless microservice that takes {html,options} and returns back the buffer, a generic solution.

The challenge was that I needed to embed puppeteer in 50mb which is the maximum size a serverless function can take on Now.

Second challenge was debugging why the f**** HTML didn't render at all.

After ours of trial and error I found that for some reason, if the html string contains the # character, it becomes somehow "invalid" and puppeteer fails silently 0_0

Third, in my particular case, the HTML uses bootstrap and just by using puppeteer.setContent didn't wait for it to load correctly. I needed to use a workaround by
puppeteer.go('text/html://${html}') which do waits for external resources to load.

Four, (and this one is the reason why I almost throws the computer through the window), the HTML markup in my case was rendered at runtime using react Dom and the go to hell react-inline-css library, which ALWAYS WRAPS the generated CSS
with this selector #ReactInlineCss ....

See the # character there? Goto point #2 above (x_x)

Well, but thanks god the pain is gone. If you wanna learn how to make it serverless like I did, hop to now's blog (zeit.co/blog)

Collapse
antoniovassell profile image
Antonio Vassell

Hey Vladimir, how were you able to fix the second point?

Collapse
calag4n profile image
calag4n

Sorry, that made me laugh 😁