Web page to PDF

##Basic goal

##What is a PDF anyway?

PDF combines three technologies:

• A subset of the PostScript page description programming language, for generating the layout and graphics.
• A font-embedding/replacement system to allow fonts to travel with the documents.
• A structured storage system to bundle these elements and any associated content into a single file, with data compression where appropriate.

(from https://en.wikipedia.org/wiki/PDF)

##Requirements

Note

The PDF you want to generate may not have all these requirements (for example, you may be content with a single "screenshot" of the DOM element as an image inside the PDF), so consider whether these are important for you too. Later we'll go over some common approaches which do not guarantee these requirements, but may be fine for what you are trying to achieve!

1. Consistency - The DOM element (for the uninitiated, the DOM is essentially the in-memory representation of a web page) may not look the same across browsers, or even operating systems.
   If you want your PDF to look the same no matter how your users access your website, this may be of high significance.
2. Fidelity - The PDF should retain as much of the quality of the content in the DOM element, so the text or SVGs will retain the vector information, images will preserve their original quality, etc.
   This also means that the CSS applied on the web page will need to look the same in the generated PDF. When I present the different approaches, you'll see why this is not trivial.
3. Generic - The approach should be able to be applied to any arbitrary HTML, so we would need to need to set anything up ahead of time. We would want no special handling for embedding certain types of content (a-la images, SVGs) or special handling for different types of HTML tags. Everything should Just Work™.
   This is especially important since, in my project, I need to be able to quickly set up a PDF conversion on changing content.

Takeaways

We want to consistently generate a PDF from a web page that should:

1. Be high-fidelity and preserve all information required to render the web page (CSS, fonts, images, SVGs)
2. Be generated on the fly for any arbitrary HTML
3. Look the same on whichever platform the users are running from

##First approaches

1import { jsPDF } from "jspdf";
2
3const doc = new jsPDF();
4doc.text("Hello world!", 10, 10);
5doc.save("a4.pdf");
6

1const doc = new jsPDF();
2const source = document.getElementById("convert-me-to-pdf");
3doc.html(source, {
4   callback: (doc) => {
5      // This callback is invoked after the DOM is converted to a PDF.
6      // We can now save the generated PDF.
7      doc.save();
8});
9

I used a <div> with an <svg>, an <image>, a heading and some text, with various styles (made easy with TailwindCSS). Try playing around with it and changing the content inside.

• Inlining the CSS with style attributes
• Including all the CSS stylesheets you use. Note that this means actually including the CSS itself in <style> tags, you can't link to external CSS stylesheets from a CDN!
  In my case, of using TailwindCSS this meant downloading the stylesheet from their CDN and plopping it into <style> tags (alternatively I could build my CSS and include that)

Not vectorized - the pdf is created from a screenshot of the component and therefore is not vectorized. If you are looking for something more advanced for generating pdf using React components, please check out other popular alternatives packages listed below.

1. It would generate the PDF based on the user's platform and browser. So someone using Chrome on macOS may not see the same PDF as someone using Firefox on Windows.
   This does not fulfill the "Consistency" requirement
2. It would run on the user's machine, so if we were to have a very rich DOM, a low-end device (especially mobile) could struggle with this, or take a long time

Takeaways

The solutions I found to generate a PDF on the client-side are usually one (or several) of the following:

1. Meant for programmatically generating a PDF (not what I needed, does not fulfill the "Generic" requirement)
2. Do not generate a high-fidelity PDF (with the CSS, fonts, vector information), thus not fulfilling the "Fidelity" requirement
3. Inconsistent or buggy, especially with rich content

Even if I were to find such a library - it would still be insufficient, due to the fact it runs on the user's machine, and thus may look different on different platforms, or may be computationally intensive on low-end devices.

##Server-side - the best side?

1. By always using the same browser and running this PDF generator on the same platform (e.g. Ubuntu) means we get consistent looking UI between renders
2. Puppeteer uses a recent version of Chrome which provides the ability to use the latest and greatest of web technologies
3. Puppeteer also has a "non-headless" mode, which does the same thing but displays the actual UI when it's running. This is useful for testing it out when things go wrong

1. Spin up a headless browser in Puppeteer
2. Generate an HTML data URI for our web page (with all its dependencies, such as fonts or stylesheets)
3. Print the page to an A4 PDF

1import type { NextApiRequest, NextApiResponse } from "next";
2import puppeteer from "puppeteer";
3import chrome from "chrome-aws-lambda";
4import React from "react";
5import ReactDOMServer from "react-dom/server";
6import ComponentToRenderToPdf from "..."; // Example
7
8async function printPDF(name: string) {
9  const browser = await puppeteer.launch(
10    process.env.NODE_ENV === "production"
11      ? {
12          args: chrome.args,
13          executablePath: await chrome.executablePath,
14          headless: chrome.headless,
15        }
16      : { headless: true }
17  );
18  const page = await browser.newPage();
19
20  // Render the desired React component to a string.
21  const html = ReactDOMServer.renderToString(
22    <html>
23      <head>
24         { /* Optionally include external stylesheets here. */ }
25      </head>
26      <body>
27         <ComponentToRenderToPdf name={name}>
28      </body>
29    </html>
30  );
31
32  // Navigate to an HTML data URI with the HTML we generated before.
33  const response = await page.goto("data:text/html," + html, { waitUntil: ["networkidle0"] });
34  if (!response.ok()) {
35     // Handle error appropriately.
36  }
37
38  await page.emulateMediaType("print");
39  const pdf = await page.pdf({ format: "a4", printBackground: true });
40
41  // Clean up after ourselves like good citizens.
42  await browser.close();
43
44  return pdf;
45}
46
47export default async (req: NextApiRequest, res: NextApiResponse<Buffer>) => {
48  // Optionally use the request and pass parameters to render the component dynamically.
49  const name = req.query.name;
50  const pdfBuffer = await printPDF(name);
51
52  // Return the result with a MIME type of `application/pdf`.
53  res.setHeader("Content-Type", "application/pdf");
54  res.setHeader("Content-Length", pdfBuffer.length);
55  res.status(200).send(pdfBuffer);
56};
57

Takeaways

We built a serverless function that, on-demand:

1. Spins up a Google Chrome headless browser instance (by leveraging Puppeteer)
2. Opens an HTML data URI that we created from our HTML (or React component in this case)
3. Prints the web page to a PDF that fulfills all our original requirements

##Conclusion