ホームページ >ウェブフロントエンド >jsチュートリアル >Node で puppeteer を使用して PDF を作成します。
Node で puppeteer を使用して PDF を作成します。
- Patricia Arquetteオリジナル
- 2024-12-27 12:25:17715ブラウズ
Puppeteer と Node.js を使用して PDF ジェネレーターを作成する方法
動的 PDF の生成は、Web 開発における一般的な要件です。請求書、レポート、履歴書のいずれの場合でも、堅牢な PDF ジェネレーターを作成することは開発者にとって必須のスキルです。この記事では、Node.js と強力なヘッドレス ブラウザ ライブラリである Puppeteer を使用して PDF ジェネレーターを構築する手順を説明します。
例として、私はこれと同じ方法を使用して CV Maker プロジェクト を構築しました。これはユーザー入力を受け取り、PDF を動的に生成します。プロジェクトのライブ デモは、ライブ デモでご覧いただけます。
このガイドは、初心者向けの平易な言葉で書かれています。ご不明な点がございましたら、お気軽にコメントを残してください。できるだけ早く対応させていただきます。
前提条件
始める前に、以下のものがあることを確認してください:
- Node.js がマシンにインストールされています。
- 基本的な Node.js プロジェクト スケルトン のセットアップ。
- Puppeteer はプロジェクトに依存関係としてインストールされます:
npm install puppeteer
このチュートリアルの完全なソース コードを参照したい場合は、私の GitHub リポジトリをチェックしてください。
ステップ 1: データを受信するための POST エンドポイントを作成する
まず、クライアントがデータを送信して PDF を生成できるエンドポイントを作成します。このために、index.js (または同等のメイン サーバー ファイル) で単純な POST ルートを定義します。
app.post("/data", async (req: Request, res: Response) => {
let postData = req.body.data; // Storing the data sent from the client
});
このエンドポイントは、PDF に含める必要があるデータを受信します。
ステップ 2: コントローラ ファイルを作成する
コードを整理しておくために、プロジェクト ディレクトリにコントローラーという名前のフォルダーを作成します。このフォルダー内に、PdfController.js という名前のファイルを作成します。
コントローラー ファイル には、PDF を生成するためのロジックを記述します。これにより、コードがモジュール化され、保守が容易になります。
ステップ 3: PDF 生成のためのロジックを作成する
PdfController.js に次のコードを追加して、Puppeteer を使用して PDF を生成します。
export default (async function (postData) {
try {
const browser = await puppeteer.launch({
headless: true,
args: ["--no-sandbox", "--disable-gpu"],
});
const page = await browser.newPage();
const content = `<html><body><h1>${postData}</h1></body></html>`;
await page.setContent(content);
await page.emulateMediaType('screen');
await page.pdf({
path: 'resume.pdf',
format: 'A4',
printBackground: true,
});
console.log('PDF created');
await browser.close();
} catch (err) {
console.error('Error:', err);
}
});
このコードの動作は次のとおりです:
- Puppeteer ブラウザ インスタンスを ヘッドレス モード で起動します。
- 新しいページを開き、ユーザーが提供したデータを使用してコンテンツを設定します。
- ページのコンテンツを PDF に変換し、resume.pdf として保存します。
- ブラウザを閉じてリソースを解放します。
ステップ 4: POST エンドポイントで PdfController 関数を使用する
次に、PdfController 関数をindex.js の POST エンドポイントに接続します。
import PdfController from "./controllers/controller.js";
app.post("/data", async (req: Request, res: Response) => {
let postData = req.body.data; // Storing the data sent from the client
await PdfController(postData);
});
これにより、/data エンドポイントが呼び出されるたびに、PDF を生成するロジックが実行されるようになります。
ステップ 5: PDF の生成を確認する
この時点で、Postman またはその他の HTTP クライアントを使用してエンドポイントをテストできます。関連するテキスト データを含む POST リクエストを送信すると、resume.pdf という名前の PDF がプロジェクトのルート ディレクトリに作成されます。
ステップ 6: PDF をクライアントに送り返す
生成された PDF を応答としてクライアントに送り返すには、fs-extra パッケージをインストールします。
npm install puppeteer
次に、次のように POST エンドポイントを更新します。
app.post("/data", async (req: Request, res: Response) => {
let postData = req.body.data; // Storing the data sent from the client
});
このコードは、resume.pdf ファイルをダウンロード可能な添付ファイルとしてクライアントに送信します。
結論
それで終わりです! ? Node.js と Puppeteer を使用して完全な PDF ジェネレーターを構築しました。この設定では、ユーザー入力に基づいて PDF を動的に生成し、ダウンロード可能なファイルとして送り返します。
これが達成したことです:
- POST エンドポイントを使用して Node.js サーバーをセットアップします。
- Puppeteer を使用して PDF を動的に生成しました。
- 生成された PDF をクライアントに送り返しました。
ボーナス
適切に構造化され、書式設定された PDF (表やスタイルを含む履歴書や請求書など) を生成したい場合は、コメントでお知らせください。高度な使用例については、別のチュートリアルを書きたいと思っています。
また、完全なプロジェクト コードを自由にチェックしてください。十分に文書化されており、初心者にも優しいです。
良い一日をお過ごしください!
以上がNode で puppeteer を使用して PDF を作成します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。