DEV Community

Generate a PDF from HTML with puppeteer

Damien Cosset on April 14, 2019

Introduction This is one of those frustrations post where I just spent hours working on something and I finally managed to have a workin...

Read full post

Vladimir López Salvador • Apr 15 '19

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)

calag4n • May 2 '19

Sorry, that made me laugh 😁

Antonio Vassell • Jan 29 '20

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

Andrei Gatej • Apr 14 '19

I've gone through something similar a few days ago... and it took me a while to figure it out.

Here's my approach, without using puppeteer.
I'm using Vue in this case, but I'm pretty sure the concept is applicable in other cases as well.

// Client
<template>
    // Use CSS to give it full width & height
    <div class="c-file">
        <iframe
            class="c-file__display"
            v-if="src"
            :src="src"
        />
    </div>
</template>

<script>
/* ... */
 async created () {
  const config = { headers: new Headers({
            'Content-Type': 'application/json',
            }), 
            method: "POST",
            body: JSON.stringify(body) // Dynamic data
        }
        fetch(url, config)
            .then(res => res.blob())
            .then(res => {

                const blob =  new Blob([res], { type: 'application/pdf' });
                this.src = URL.createObjectURL(blob, { type: 'application/pdf' })
            })
 }
</script>

  // Server
  /* ... */
   const pdf = require('html-pdf')
   // Generate HTML string
   const content = getPDFContent(req.body.data);


   res.setHeader('Content-Type', 'application/pdf')
   pdf.create(content).toStream( (err, stream) => {
      stream.pipe(res);
   });

Vladimir López Salvador • Apr 15 '19 • Edited

html-pdf uses phantomjs under the hood. Where is your app hosted? It didn't work for me on Docker based cloud providers like Now

Andrei Gatej • Apr 15 '19

The app isn’t hosted (yet), it is all on localhost. I haven’t tried docker nor used cloud providers too often, but I’m really curious about why this approach wouldn’t work.

Please let me know if you find a solution!

Ian L. • Apr 15 '19

We've had success hosting a similar Puppeteer-based converter using Google Cloud Functions (I don't work for Google): github.com/Courtsite/shuttlepdf. There is a bit of latency, but it is a reasonable trade-off for ease of deployment, scalability, and reliability.

Vladimir López Salvador • Apr 15 '19

Well, in my case, phantomjs wasn't found by the library on my docker based hosting.

There is a dockerized phantom available but you should have full access the deployment Dockerfile in order to tell it to install on the process.

Overall I would recommend going away from html-pdf because it's not maintained anymore

Ian L. • Apr 15 '19 • Edited

Generally speaking, you should probably avoid Phantomjs. With headless Chromium, there really isn't any need for it. Indeed, I think it is no longer maintained.

Tony Mezzolesta • Apr 28 '20

Sweet lord thank you for this.
I was using the html-pdf package and was having no issues until I to either deploy to azure app service or run it in a docker container.
Didn't realize that phantomJS is pretty much no longer supported so this was a life saver.

Also, if anyone was curious, I was having issues running puppeteer in a docker container. Found this gem in order to make chromium work in the container:

const browser = await puppeteer.launch({ headless: true,  args: ['--no-sandbox', '--disable-setuid-sandbox'], ignoreHTTPSErrors: true, dumpio: false });

Andrea Gherardi • Apr 18 '19

Interesting post, thanks for sharing!

I have a question: where is the code in which you inject the data into the template?
I mean, I can see where you load the HTML template and render it into a PDF, and I can see the front-end sending some data to customise the PDF like invoiceDetails, clientDetails etc. but how do you actually put that data inside the template?

Damien Cosset • Apr 18 '19

I have a "react" template on the front end, the one you see.
There is an Html template on the back, with placeholders for the future data. After that, to populate the html template on the back, it's just String.replace() functions