HTML puppet for PDF generation with Node.js - RisingStack Engineering (2023)

In this article, I'll show you how you can create a Puppeteer PDF document from a highly-designed React web page usingNode.jsNode.js is an event-driven, asynchronous JavaScript runtime and is most effective in building scalable web applications. Node.js is block-free, so there is no way to block a process., Headless Chrome y Docker.

Background: A few months ago, one of our clientsRisingStackasked us to develop a feature that would allow the user to request a React page in PDF format. This page is basically a report/output for patients with data view that contains many SVGs. Also, there were some special requests to manipulate the layout and do some rearrangements of the HTML elements. Therefore, the PDF should have a different layout and additions compared to the original React page.

Since the task was a bit more complex than could be solved with simple CSS rules, we first looked at possible implementations. Essentially, we found 3 main solutions. This blog post will walk you through these possibilities and the final implementations.

A personal note before we begin: it's a lot of work, so buckle up!

Index:

• Client-side or backend PDF generation?
• Option 1: Take a screenshot of the DOM
• Option 2: Use only a PDF library
• Last option 3: Titiritero, Headless Chrome with Node.js
  • manipulation of silence
  • Send the file to the client and save
• Using Puppeteer with Docker
• Option 3+1: CSS-Druck Rule
• resume

Client-side or server-side PDF generation?

A PDF file can be generated both client side and server side. However, it probably makes more sense to leave this on the backend, since you don't want to consume all the resources that the user's browser provides.

However, I will still show solutions for both methods.

Option 1: Take a screenshot of the DOM

At first glance, this solution seemed the simplest, and it turned out to be true, but it has its own limitations. If you don't have special requirements like B. selectable or searchable text in the PDF, this is a good and easy way to create one.

This method is simple: take a screenshot of the page and paste it into a PDF file. Very easy. We use two packages for this approach:

html2canvasto take a screenshot of the DOM
jspdf, a library for generating PDF

Let's start coding.

npm install html2canvas jspdf

{ const domElement = document.getElementById('your-id') html2canvas(domElement, { onclone: ​​(document) => { document.getElementById('printbutton').style.visibility = 'hidden' }}) .then ((canvas) => { const img = canvas.toDataURL('image/png') const pdf = new jsPdf() pdf.addImage(imgData , 'JPEG', 0, 0, Breite, Höhe) pdf.save (' Your-date-name.pdf')})

And it is that!

make sure to see themhtml2canvasuncleMethod. This can be useful when you need to take a quick snapshot and manipulate the DOM (for example, hide the push button) before capturing the image. I see quite a few use cases for this package. Unfortunately ours wasn't one because we had to do the PDF creation in the backend.

Option 2: Use only a PDF library

There are several libraries out thereMNPnpm is a software registry that hosts over 1.3 million packages. npm is used by open source developers around the world, as well as by many companies for sharing and borrowing code. npm consists of three components: the registry command line interface (CLI) website Use the website to discover and download packages, create user profiles, and...for this purpose, like jsPDF (mentioned earlier) thePDFKit🇧🇷 The problem with this was that you would have to rebuild the page structure if you wanted to use these libraries. This definitely hurts maintainability as you would have to apply any subsequent changes to the PDF template and react to the page.

Check the code below. You must create the PDF document manually. Now you can go through the DOM and figure out how to translate each element to PDF elements, but that's tedious work. There must be an easier way.

doc = new PDFDocumentdoc.pipe fs.createWriteStream('output.pdf')doc.font('fonts/PalatinoBold.ttf') .fontSize(25) .text('Some text with embedded font!', 100, 100 ) doc .image('path/a/image.png', { fit: [250, 300], align: 'center', align: 'center'}); doc.addPage() .fontSize(25) .text('Here are some vector graphics...', 100, 100) doc.end()

This snippet is taken from the PDFKit documentation. However, it can be useful if your goal is a PDF file and not to convert an existing (and constantly changing) HTML page.

Last option 3: Titiritero, Headless Chrome with Node.js

What ispuppet🇧🇷 The documentation says:

Puppeteer is a node library that provides a high-level API for controlling Chrome or Chromium through the DevTools protocol. Puppeteer runs command-free by default, but can be configured to run entirely (not command-free) Chrome or Chromium.

It's basically a browser that you can run from Node.js. When you read the documentation, the first thing it tells you about Puppeteer is that you can use itCaptures of Gere cloth and PDF of pages🇧🇷 Great! This is what we were looking for.

Let's install Puppeteer with itnpmi i puppeteer, and we implement our use case.

const puppeteer = require('puppet') asynchronous function printPDF() { browser const = guardpuppeter.launch({ headless: true }); page const = table in browser.newPage(); await page.goto('https://blog.risingstack.com', {waitUntil:'networkidle0'}); const pdf = await page.pdf({ format: 'A4' }); wait in browser.close(); zurück pdf})

This is a simple function that navigates to a URL and outputs a PDF of the site.

First, we launch the browser (PDF generation is only supported in headless browser mode), then open a new page, set the viewport size, and navigate to the specified URL.

defining thewait until: 'network idle0'The option means that Puppeteer will consider browsing complete if there are no network connections for at least 500ms. (TestAPI documentFor more information.)

We then save the PDF to a variable, close the browser, and return the PDF.

notice thatpage.pdfmethod gets aoptionsObject where you can also save the file to disk using the "Path" option. If no path is specified, the PDF will not be saved to disk, but will get a buffer. I'll discuss how to handle this later.)

If you need to login first to generate a PDF from a secure page, you must first navigate to the login page, verify the form elements for ID or name, complete them, and submit the form:

waitpage.type('#email', process.env.PDF_USER)waitpage.type('#password', process.env.PDF_PASSWORD)waitpage.click('#submit');

Always store credentials in environment variables, don't hardcode them!

manipulation of silence

Puppeteer also has a workaround for this style manipulation. You can insert style tags before generating the PDF and Puppeteer will generate a file with the modified styles.

await page.addStyleTag({contenido: '.nav {display: none} .navbar {borde: 0px} #print-button {display: none}' })

Send the file to the client and save

Ok, now you have generated a PDF file in the backend. And now?

As I mentioned above, if you don't save the file to disk, you'll get a buffer. You just need to send this buffer to the interface with the correct content type.

printPDF().then(pdf => {res.set({ 'Content-Type': 'aplicativo/pdf', 'Content-Length': pdf.length })res.send(pdf)})

Now you can send a request to the server to get the generated PDF.

function getPDF() { return axios.get(`${API_URL}/your-pdf-endpoint`, { responseType: 'arraybuffer', headers: { 'Accept': 'application/pdf' } })

After sending the request, the buffer should start to flush. The final step now is to convert the buffer to a PDF file.

savePDF = () => { this.openModal('Carregando…')// open the modalgetPDF() volver// API call.then((resposta) => { const blob = new Blob([resposta.data], {tipo: 'aplicativo/pdf'}) const link = document.createElement('a') link.href = janela.URL. createObjectURL(blob) link.download = `Ihr-Dateiname.pdf` link.click() this.closeModal()// Close modal}) .catch(error =>/** Error handling **/) }

<button onClick={this.savePDF}>Also speaks PDF</button>

Is that! If you click the Save button, the browser will save the PDF.

Using Puppeteer with Docker

I think this is the trickiest part of the implementation, so I'll save you a few hours of googling.

The official documentation says so."Getting Headless Chrome to work on Docker can be tricky"🇧🇷 Official documents have aTroubleshootingSection where, at the time of writing this article, you can find all the information you need to install Puppeteer with Docker.

When installing Puppeteer on an Alpine image, make sure to scroll down a bitthis part of the page🇧🇷 Otherwise, you can ignore the fact that you can't run the latest version of Puppeteer, and you should also disable the use of shm using a flag:

const browser = await titiritero.launch({ headless: true, args: ['--disable-dev-shm-usage']});

Otherwise, the Puppeteer thread may run out of memory even before it starts successfully. For more information on how to do this, see the troubleshooting link above.

Option 3+1: CSS-Druck Rule

One might think that simply using CSS print rules is easy from a developer's point of view. No NPM or Node modules, just plain CSS. But how are they doing when it comes to cross-browser compatibility?

When choosing CSS print rules, you need to test the output in each browser to make sure it delivers the same layout, and it's not 100% true.

For example, inserting a pause after a certain element cannot be considered an esoteric use case, but you might be surprised to have to use workarounds.to make this work in firefox.

Unless you are a seasoned CSS wizard with a lot of experience creating printable pages, this can be time consuming.

Printing rules are great when you can keep your printing style sheets simple.

Let's see an example.

@media print { .print-button { pantalla: nenhum; } .content div { break-after: sempre; }}

This CSS above hides the print button and inserts a page break after each onedivisionwith the classContent.there is onegood articlewhich summarizes what you can do with print rules and the difficulties with them, including browser compatibility.

In general, CSS print rules are great and effective when you want to create a PDF from a not-so-complex page.

Summary: Puppeteer PDF from HTML using Node.js

So, let's quickly review the options we've covered here for generating PDF files from HTML pages:

• SUN screenshot: This can be useful when you need to take pictures of a page (for example, to create a thumbnail), but it is insufficient when you have a lot of data to process.
• Use only a PDF library: If you need to programmatically create PDF files from scratch, this is a perfect solution. Otherwise, you will have to keep the HTML and PDF templates, which is definitely not possible.
• puppet: Although Docker was relatively difficult to work with, it provided the best result for our use case and was also the easiest to code.
• CSS printing rulesNote: If your users are skilled enough to know how to print to a file, and your pages are relatively simple, this may be the easiest solution. As you saw in our case, this was not the case.

Be sure to contact RisingStack if necessary.Help with Node, React or just JS in general.

Have fun with your PDF HTML!