📃

Node.jsでPDFファイルを作成する

JboyHashimoto

2023/09/16に公開

Overview

Node.jsでPDFファイルを作成することができるらしい？
興味があって試してみた。
こちらのパッケージを使ってみる
https://pdfkit.org/

インストールするパッケージ

npm install @types/express": "^4.17.17",
npm install "@types/node": "^20.6.2",
npm install "@types/pdfkit": "^0.12.11",
npm install "express": "^4.18.2",
npm install "pdfkit": "^0.13.0",

summary

Node.jsのフレームワークのExpressと、GoogleFontsを今回は使用します。日本語のフォントがないと、PDFファイルを作成したときに、文字化けします!
英語でも同じだった!

fontsフォルダを作成して、.ttfファイルを配置する。

こちらのロジックをそのまま使えばOK。
GoogleFontsの相対パスの指定ができていればOK。const fontPathという箇所です。

import express, { Request, Response, NextFunction } from "express";
import PDFDocument from "pdfkit";
import path from "path";

const app = express();
const port = 3000;

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "index.html"));
});

app.post("/generate", (req, res) => {
  const doc = new PDFDocument();

  // ヘッダーを設定してPDFとしてレスポンスを送る
  res.setHeader("Content-Type", "application/pdf");
  res.setHeader("Content-Disposition", 'attachment; filename="SkillSheet.pdf"');

  // この変数の中に、fontsフォルダのパスを指定する
  const fontPath = path.join(__dirname, "fonts/NotoSansJP-VariableFont_wght.ttf");
  doc.font(fontPath);

  doc.pipe(res);

  // PDFの内容を追加
  doc.fontSize(25).text("あなたのスキルシート", 50, 50);
  doc.moveDown();
  doc.text(`得意な技術: ${req.body.technology}`);
  doc.moveDown();
  doc.text(`経歴: ${req.body.experience}`);
  doc.moveDown();
  doc.text(`自己PR: ${req.body.pr}`);
  doc.end();
});


// エラーハンドリングミドルウェア
app.use((err: Error, req: Request, res: Response, next: NextFunction) => {
  console.error(err.message);
  res.status(500).send('Something went wrong! Please try again later.');
});

app.listen(port, () => {
  console.log(`Server started on http://localhost:${port}`);
});

ブラウザから操作するので、index.htmlを作成する

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Generator</title>
</head>
<body>
    <h2>あなたのスキルシートの入力</h2>
    <form action="/generate" method="post">
        <label for="technology">得意な技術:</label><br>
        <input type="text" id="technology" name="technology"><br><br>

        <label for="experience">経歴:</label><br>
        <input type="text" id="experience" name="experience"><br><br>

        <label for="pr">自己PR:</label><br>
        <input type="text" id="pr" name="pr"><br><br>

        <input type="submit" value="PDF生成">
    </form>
</body>
</html>

ローカルサーバーを起動するコマンド

npx ts-node index.ts

こちらのURLを開く
http://localhost:3000

入力をして成功するとPDFファイルが生成される。あとはダウンロードするだけ。

thoughts

やってみて躓いたことは、そのままパッケージを使うとデフォルトでは日本語対応していないことでした。何かしら、.ttfというフォントのファイルが必要でした。
今回は趣味で作っただけなので詳しくは解説しておりません。PDF作るアプリケーション作ってみたい人は、詳しく調べてみてください。

こちらが完成品のコードです

Jboy王国メディアPublication

これは、Jboy王国公式のZennアカウントです。

Overview

summary

thoughts

Discussion