Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

HTML と CSS で PDF を生成する

最終更新 Markdown で表示Agent セットアップ

Browser Run Worker をデプロイする ガイドのとおり、Browser Run は任意の URL のスクリーンショットを生成できます。スクリーンショットに加えて、指定した Web ページの PDF 全体も生成できます。ページのマークアップとスタイルを自分で渡すこともできます。

Browser Run で PDF を生成する方法は 2 つあります。

用途に合う方法を選んでください。

次の例では、Puppeteer で PDF を生成します。

前提条件

  1. create-cloudflare CLI で、新しい Hello World の Cloudflare Worker スクリプトを生成します。
npm create cloudflare@latest -- browser-worker
  1. Browser Run インスタンスを操作できる @cloudflare/puppeteer をインストールします。
npm i -D @cloudflare/puppeteer
  1. 新しい Wrangler 設定に Browser Run バインディングを追加します。
{
	"browser": {
		"binding": "BROWSER",
	},
}
[browser]
binding = "BROWSER"
  1. src/index.ts（JavaScript プロジェクトの場合は src/index.js）の内容を、次のスケルトンスクリプトに置き換えます。
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. HTML と CSS を定義する

ユーザー指定の URL へ Browser Run で移動するのではなく、Web ページを自分で生成し、そのページを Browser Run インスタンスへ渡します。任意のデザインをレンダリングできます。

この例では、ユーザー指定の内容（?name= パラメーター）を受け取り、最終的な PDF にその名前を出力します。

まず、generateDocument 関数を次のように実装します。

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

この HTML は、ユーザー指定の名前が Cloudflare Workers で PDF を生成できたことを示す、証明書風のベージュ背景を描画します。

2. HTML と CSS をブラウザーへ読み込む

スタイル付きの HTML ドキュメントができたので、その内容をブラウザーインスタンスへ送れます。次のように空のページを作り、ドキュメントを格納します。

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

page.setContent() ↗ は、文字列からページの HTML を設定できます。作成したドキュメントを次のように渡します。

await page.setContent(document);

3. PDF を生成して返す

Browser Run インスタンスが渡した HTML と CSS をレンダリングしているので、page.pdf() ↗ で PDF ファイルを生成し、クライアントへ返せます。

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

page.pdf() は 複数のオプション ↗ に対応しています。生成 PDF の寸法を特定の用紙サイズにする、余白を設定する、完全に透明な背景を許可する、などです。ここでは printBackground だけを上書きし、body の背景スタイルが表示されるようにします。

PDF データを取得したら、application/pdf の Content-Type でクライアントへ返します。

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

まとめ

完成した Worker スクリプトは次のとおりです。

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

次のコマンドでスクリプトを実行し、テストできます。

npx wrangler dev

スクリプトが動いたら、ローカル URL に ?name パラメーターを付けます（例: http://localhost:8787/?name=Harley）。次のような結果になります。

生成された PDF のスクリーンショット。モック証明書に著者名が表示されています。.

カスタムフォント

PDF に、Browser Run 環境へ事前インストールされていない特定のフォントが必要な場合は、addStyleTag でカスタムフォントを読み込めます。PDF 生成の前に、CDN からフォントを注入するか、Base64 文字列として埋め込めます。

詳しい手順と例は、独自のカスタムフォントを使う を参照してください。

PDF を動的に生成すると、顧客への請求書発行、文書のアーカイブ、動的な証明書作成（この簡単な例）など、よくある用途を解決できます。

役に立ちましたか？