cloudflare · hturan · Oct 14, 2024 · Oct 14, 2024 · Oct 14, 2024 · Oct 14, 2024
@@ -0,0 +1,12 @@
+---
+title: How To
+pcx_content_type: navigation
+sidebar:
+  order: 4
+  group:
+    hideIndex: true
+---
+
+import { DirectoryListing } from "~/components";
+
+<DirectoryListing />
@@ -0,0 +1,267 @@
+---
+pcx_content_type: how-to
+title: Generate PDFs Using HTML and CSS
+sidebar:
+  order: 1
+---
+
+import { Aside } from "~/components";
+
+As seen in the [Getting Started guide](https://developers.cloudflare.com/browser-rendering/get-started/screenshots/), Browser Rendering can be used to generate screenshots for any given URL. Alongside screenshots, we can also generate full PDF documents for a given webpage, and can also provide the webpage markup and style ourselves.
+
+## Prerequisites
+
+1. Use the `create-cloudflare` CLI to generate a new Hello World Cloudflare Worker script:
+
+```sh
+npm create cloudflare@latest -- browser-worker
+```
+
+2. Install `@cloudflare/puppeteer`, allowing us to control the Browser Rendering instance:
+
+```sh
+npm install @cloudflare/puppeteer --save-dev
+```
+
+3. Add our Browser Rendering binding to our new `wrangler.toml` configuration:
+
+```yaml
+browser = { binding = "BROWSER" }
+```
+
+4. Replace the contents of `src/index.ts` (or `src/index.js` for JavaScript projects) with the following skeleton script:
+
+```ts
+import puppeteer from "@cloudflare/puppeteer";
+
+const generateDocument = (name: string) => {};
+
+export default {
+	async fetch(request, env) {
+		const { searchParams } = new URL(request.url);
+		let name = searchParams.get("name");
+
+		if (!name) {
+			return new Response("Please provide a name using the ?name= parameter");
+		}
+
+		const browser = await puppeteer.launch(env.BROWSER);
+		const page = await browser.newPage();
+
+		// Step 1: Define HTML and CSS
+		const document = generateDocument(name);
+
+		// Step 2: Send HTML and CSS to our browser
+		await page.setContent(document);
+
+		// Step 3: Generate and return PDF
+
+		return new Response();
+	},
+};
+```
+
+## Step One: Define HTML and CSS
+
+Rather than using Browser Rendering to navigate to a user-provided URL, here we’re going to generate a webpage manually and then provide that webpage to the Browser Rendering instance, allowing us to render any design we please.
+
+<Aside>
+	It’s worth noting that you can generate your HTML or CSS using any method
+	you’d like. For now we’re using string interpolation, but this method is
+	fully-compatible with web frameworks capable of rendering HTML on Workers such
+	as React, Remix, and Vue.
+</Aside>
+
+For this example, we’re going to take in user-provided content (via a `?name=` parameter), and have that name output in the final PDF document.
+
+To start, let’s fill out our `generateDocument` function with the following:
+
+```ts
+const generateDocument = (name: string) => {
+	return `
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      html,
+      body,
+      #container {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+      }
+      body {
+        font-family: Baskerville, Georgia, Times, serif;
+        background-color: #f7f1dc;
+      }
+      strong {
+        color: #5c594f;
+        font-size: 128px;
+        margin: 32px 0 48px 0;
+      }
+      em {
+        font-size: 24px;
+      }
+      #container {
+        flex-direction: column;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="container">
+      <em>This is to certify that</em>
+      <strong>${name}</strong>
+      <em>has rendered a PDF using Cloudflare Workers</em>
+    </div>
+  </body>
+</html>
+`;
+};
+```
+
+This example HTML document should render a beige background imitating a certificate showing that the user-provided name has successfully rendered a PDF using Cloudflare Workers.
+
+<Aside>
+	It’s usually best to avoid directly interpolating user-provided content into
+	an image or PDF renderer in production applications. To render contents like
+	an invoice, it wold be best to validate the data input, and fetch data
+	yourself using tools like [D1](https://developers.cloudflare.com/d1) or
+	[Workers KV](https://developers.cloudflare.com/workers-kv).
+</Aside>
+
+## Step Two: Load HTML and CSS Into Browser
+
+Now that we have our fully-styled HTML document, we can take the contents and send it to our browser instance. We can create an empty page to store this document as follows:
+
+```ts
+const browser = await puppeteer.launch(env.BROWSER);
+const page = await browser.newPage();
+```
+
+The [`page.setContent()`](https://github.com/cloudflare/puppeteer/blob/main/docs/api/puppeteer.page.setcontent.md) function can then be used to set the page’s HTML contents from a string, so we pass in our created document directly like so:
+
+```ts
+await page.setContent(document);
+```
+
+## Step Three: Generate and Return PDF
+
+With our Browser Rendering instance now rendering our provided HTML and CSS, we can use the [`page.pdf()`](https://github.com/cloudflare/puppeteer/blob/main/docs/api/puppeteer.page.pdf.md) command to generate a PDF file and return it to the client.
+
+```ts
+let pdf = page.pdf({ printBackground: true });
+```
+
+The `page.pdf()` call supports a [number of options](https://github.com/cloudflare/puppeteer/blob/main/docs/api/puppeteer.pdfoptions.md), including setting the dimensions of the generated PDF to a specific paper size, setting specific margins, and allowing fully-transparent backgrounds. For now, we’re only overriding the `printBackground` option to allow our `body` background styles to show up.
+
+Now that we have our PDF data, it’s just a matter of returning it to the client in the `Response` with an `application/pdf` content type:
+
+```ts
+return new Response(pdf, {
+	headers: {
+		"content-type": "application/pdf",
+	},
+});
+```
+
+## Conclusion
+
+The full Worker script now looks as follows:
+
+```ts
+import puppeteer from "@cloudflare/puppeteer";
+
+const generateDocument = (name: string) => {
+	return `
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+	  html, body, #container {
+		width: 100%;
+	    height: 100%;
+		margin: 0;
+	  }
+      body {
+        font-family: Baskerville, Georgia, Times, serif;
+        background-color: #f7f1dc;
+      }
+      strong {
+        color: #5c594f;
+		font-size: 128px;
+		margin: 32px 0 48px 0;
+      }
+	  em {
+		font-size: 24px;
+	  }
+      #container {
+		flex-direction: column;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+		text-align: center
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="container">
+		<em>This is to certify that</em>
+		<strong>${name}</strong>
+		<em>has rendered a PDF using Cloudflare Workers</em>
+	</div>
+  </body>
+</html>
+`;
+};
+
+export default {
+	async fetch(request, env) {
+		const { searchParams } = new URL(request.url);
+		let name = searchParams.get("name");
+
+		if (!name) {
+			return new Response("Please provide a name using the ?name= parameter");
+		}
+
+		const browser = await puppeteer.launch(env.BROWSER);
+		const page = await browser.newPage();
+
+		// Step 1: Define HTML and CSS
+		const document = generateDocument(name);
+
+		// // Step 2: Send HTML and CSS to our browser
+		await page.setContent(document);
+
+		// // Step 3: Generate and return PDF
+		const pdf = await page.pdf({ printBackground: true });
+
+		return new Response(pdf, {
+			headers: {
+				"content-type": "application/pdf",
+			},
+		});
+	},
+};
+```
+
+We can run this script to test it using Wrangler’s `--remote` flag:
+
+```sh
+npx wrangler@latest dev --remote
+```
+
+With our script now running, we can pass in a `?name` parameter to the local URL (such as `http://localhost:8787/?name=Harley`) and we should see the following:
+
+![A screenshot of a generated PDF, with the author’s name shown in a mock certificate.](~/assets/images/browser-rendering/pdf-generation.png).
+
+---
+
+Dynamically generating PDF documents solves a number of common use-cases, from invoicing customers to archiving documents to creating dynamic certificates (as seen in our simple example here).