React(JSX/TSX)

ReactDOMServer を使用して JSX/TSX から HTML 文字列を生成し、それを pdfg の API に送信して PDF に変換する方法を説明します。

技術的な概要

JSX/TSX で記述された React コンポーネントを作成
ReactDOMServer.renderToString()を使用して HTML 文字列に変換
生成された HTML 文字列を pdfg の API に送信して PDF 化

サンプル

コンポーネントの定義

// Invoice.tsx
import React from "react";

interface Props {
  items: { name: string; price: number }[];
  total: number;
}

export const Invoice: React.FC<Props> = ({ items, total }) => (
  <html>
    <head></head>
    <body>
      <div className="invoice">
        <h1>請求書</h1>
        <table>
          <thead>
            <tr>
              <th>品目</th>
              <th>金額</th>
            </tr>
          </thead>
          <tbody>
            {items.map((item, i) => (
              <tr key={i}>
                <td>{item.name}</td>
                <td>{item.price}円</td>
              </tr>
            ))}
          </tbody>
        </table>
        <p className="total">合計: {total}円</p>
      </div>
    </body>
  </html>
);

コンポーネントの使用と PDF 生成

// generatePdf.ts
import ReactDOMServer from "react-dom/server";
import { Invoice } from "./Invoice";
import fs from "fs";

// データの準備
const items = [
  { name: "商品A", price: 1000 },
  { name: "商品B", price: 2000 },
];

// JSXをHTML文字列に変換
const html = ReactDOMServer.renderToString(
  <Invoice items={items} total={3000} />
);

// pdfgのAPIにリクエスト
const response = await fetch("https://api.pdfg.net/v1", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer YOUR_API_KEY",
  },
  body: JSON.stringify({
    html: html,
    pdfOptions: {
      format: "A4",
    },
  }),
});

// PDFの保存
if (response.ok) {
  const pdfBuffer = await response.arrayBuffer();
  fs.writeFileSync("invoice.pdf", Buffer.from(pdfBuffer));
}

開発向けプレビューモード Vue.js