INTEGRITY Dokumentace

← Browser Run / browser-run / how-to

Generování PDF pomocí HTML a CSS

Jak je vidět v Nasaďte Browser Run Worker příručce lze Browser Run použít ke generování snímků obrazovky pro libovolnou zadanou adresu URL. Kromě snímků obrazovky můžete pro danou webovou stránku vygenerovat také kompletní dokumenty PDF a sami zadat značkování a styl webové stránky.

Soubory PDF můžete pomocí Browser Run generovat dvěma způsoby:

Vyberte metodu, která nejlépe vyhovuje vašemu způsobu použití.

Následující příklad vám ukazuje, jak vygenerovat PDF pomocí Puppeteer.

Předpoklady

  1. Použijte create-cloudflare CLI ke generování nového skriptu Hello World pro Cloudflare Worker:
npm create cloudflare@latest -- browser-worker
  1. Nainstalujte @cloudflare/puppeteer, která umožňuje ovládat instanci Browser Run:
npm i -D @cloudflare/puppeteer
  1. Přidejte vazbu Browser Run do nové konfigurace Wrangler:
{
	"browser": {
		"binding": "BROWSER",
	},
}
[browser]
binding = "BROWSER"
  1. Nahraďte obsah src/index.ts (nebo src/index.js pro projekty JavaScript) s následujícím kostrovým skriptem:
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();
	},
};

1. Definice HTML a CSS

Místo toho, aby Browser Run přešel na adresu URL zadanou uživatelem, vygenerujte webovou stránku ručně a předejte ji instanci Browser Run. Díky tomu můžete vykreslit jakýkoli návrh, který chcete.

V tomto příkladu přijmeme obsah zadaný uživatelem (prostřednictvím parametru '?name='), a toto jméno zobrazíme ve výsledném dokumentu PDF.

Nejprve vyplňte své generateDocument pomocí následujícího:

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>
`;
};

Tento ukázkový HTML dokument by měl vykreslit béžové pozadí napodobující certifikát, který ukazuje, že se uživatelem zadané jméno úspěšně vykreslilo do PDF pomocí Cloudflare Workers.

2. Načtení HTML a CSS do prohlížeče

Nyní, když máte plně stylovaný dokument HTML, můžete jeho obsah odeslat do instance prohlížeče. Vytvořte prázdnou stránku, do které tento dokument uložíte, následujícím způsobem:

const browser = await puppeteer.launch(env.BROWSER);
const page = await browser.newPage();

page.setContent() ↗ pak můžete použít k nastavení obsahu HTML stránky z řetězce, takže do ní můžete přímo předat vytvořený dokument takto:

await page.setContent(document);

3. Generování a vrácení PDF

Jakmile vaše instance Browser Run vykresluje zadaný kód HTML a CSS, můžete použít page.pdf() ↗ příkaz k vygenerování souboru PDF a jeho odeslání klientovi.

let pdf = page.pdf({ printBackground: true });

page.pdf() volání podporuje počet možností ↗, včetně nastavení rozměrů vygenerovaného PDF na konkrétní formát papíru, nastavení konkrétních okrajů a povolení zcela průhledného pozadí. Prozatím přepisujete pouze printBackground umožňuje vašemu body aby se zobrazily styly pozadí.

Nyní, když máte data PDF, vraťte je klientovi v Response s application/pdf typ obsahu:

return new Response(pdf, {
	headers: {
		"content-type": "application/pdf",
	},
});

Závěr

Úplný skript Workeru nyní vypadá takto:

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 });

		// Close browser since we no longer need it
		await browser.close();

		return new Response(pdf, {
			headers: {
				"content-type": "application/pdf",
			},
		});
	},
};

Skript můžete otestovat spuštěním přes:

npx wrangler dev

Jakmile váš skript běží, můžete předat ?name parametr na místní URL adresu (například http://localhost:8787/?name=Harley) a měli byste vidět následující:

Snímek obrazovky vygenerovaného PDF se jménem autora zobrazeným na vzorovém certifikátu..

Vlastní písma

Pokud váš PDF vyžaduje konkrétní písmo, které není předinstalované v prostředí Browser Run, můžete vlastní písma načíst pomocí addStyleTag. Díky tomu můžete před generováním PDF vložit písma z CDN nebo je vložit jako řetězce Base64.

Podrobné pokyny a příklady najdete v Použití vlastního písma.

Dynamické generování dokumentů PDF řeší řadu běžných případů užití, od fakturace zákazníkům přes archivaci dokumentů až po vytváření dynamických certifikátů (jak ukazuje jednoduchý příklad zde).