Vue.js

Vue.js のサーバーサイドレンダリング機能を使用して HTML 文字列を生成し、それを pdfg の API に送信して PDF に変換する方法を説明します。

技術的な概要

Vue.js コンポーネントを作成
@vue/server-renderer を使用して HTML 文字列に変換
生成された HTML 文字列を pdfg の API に送信して PDF 化

サンプル

コンポーネントの定義

<!-- Invoice.vue -->
<template>
  <html>
    <head></head>
    <body>
      <div class="invoice">
        <h1>請求書</h1>
        <table>
          <thead>
            <tr>
              <th>品目</th>
              <th>金額</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in items" :key="index">
              <td>{{ item.name }}</td>
              <td>{{ item.price }}円</td>
            </tr>
          </tbody>
        </table>
        <p class="total">合計: {{ total }}円</p>
      </div>
    </body>
  </html>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";

interface Item {
  name: string;
  price: number;
}

export default defineComponent({
  props: {
    items: {
      type: Array as PropType<Item[]>,
      required: true,
    },
    total: {
      type: Number,
      required: true,
    },
  },
});
</script>

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

// generatePdf.ts
import { createSSRApp } from "vue";
import { renderToString } from "@vue/server-renderer";
import Invoice from "./Invoice.vue";
import fs from "fs";

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

// Vueアプリケーションの作成
const app = createSSRApp(Invoice, {
  items,
  total: 3000,
});

// HTML文字列に変換
const html = await renderToString(app);

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

React(JSX/TSX)Jinja2 (Python)