ClaudeCodeLab
Use Cases

Cara Implement PDF Generation dengan Claude Code

Pelajari cara implement pdf generation menggunakan Claude Code. Dilengkapi contoh kode praktis dan panduan langkah demi langkah.

PDFgenerate dengan Claude Code: efisienにimplementasi

請求書、レポート、帳票 dll. PDFoutput 業務aplikasi 頻出 機能.Claude Codeなら、template設計 dari PDFgenerateロジックま 一括 implementasi bisa dilakukan.

jsPDFで請求書をgenerate

軽量なjsPDFlibrary 使った請求書generate 例.

> jsPDF dengan 日本語dukungan 請求書PDF generateするfungsi buatkan.
> 会社名、宛先、明細行、合計金額 含めて。
import { jsPDF } from "jspdf";

interface InvoiceItem {
  description: string;
  quantity: number;
  unitPrice: number;
}

interface InvoiceData {
  invoiceNumber: string;
  date: string;
  companyName: string;
  clientName: string;
  items: InvoiceItem[];
  taxRate: number;
}

export function generateInvoice(data: InvoiceData): jsPDF {
  const doc = new jsPDF();
  const pageWidth = doc.internal.pageSize.getWidth();

  // Header
  doc.setFontSize(24);
  doc.text("請求書", pageWidth / 2, 30, { align: "center" });

  doc.setFontSize(10);
  doc.text(`請求書番号: ${data.invoiceNumber}`, pageWidth - 20, 50, { align: "right" });
  doc.text(`発行日: ${data.date}`, pageWidth - 20, 57, { align: "right" });

  // Recipient
  doc.setFontSize(14);
  doc.text(`${data.clientName} 御中`, 20, 70);

  doc.setFontSize(10);
  doc.text(data.companyName, pageWidth - 20, 70, { align: "right" });

  // Line items table
  let y = 90;
  doc.setFillColor(240, 240, 240);
  doc.rect(20, y, pageWidth - 40, 10, "F");
  doc.text("項目", 25, y + 7);
  doc.text("数量", 110, y + 7);
  doc.text("単価", 135, y + 7);
  doc.text("金額", 165, y + 7);

  y += 15;
  let subtotal = 0;

  data.items.forEach((item) => {
    const amount = item.quantity * item.unitPrice;
    subtotal += amount;

    doc.text(item.description, 25, y);
    doc.text(String(item.quantity), 115, y);
    doc.text(`$${item.unitPrice.toLocaleString()}`, 135, y);
    doc.text(`$${amount.toLocaleString()}`, 165, y);
    y += 10;
  });

  // Total
  const tax = Math.floor(subtotal * data.taxRate);
  const total = subtotal + tax;

  y += 5;
  doc.line(120, y, pageWidth - 20, y);
  y += 10;
  doc.text(`小計: $${subtotal.toLocaleString()}`, 165, y, { align: "right" });
  y += 8;
  doc.text(`消費税(${data.taxRate * 100}%): $${tax.toLocaleString()}`, 165, y, { align: "right" });
  y += 10;
  doc.setFontSize(14);
  doc.text(`合計: $${total.toLocaleString()}`, 165, y, { align: "right" });

  return doc;
}

PuppeteerでHTMLからPDFkonversi

kompleksなlayout 場合、HTMLtemplate dari PDF generate metode praktis.

import puppeteer from "puppeteer";

interface ReportData {
  title: string;
  date: string;
  sections: { heading: string; content: string }[];
  chartImageBase64?: string;
}

export async function generateReportPdf(data: ReportData): Promise<Buffer> {
  const html = `
    <!DOCTYPE html>
    <html>
    <head>
      <style>
        body { font-family: 'Noto Sans JP', sans-serif; margin: 40px; color: #333; }
        h1 { color: #1e40af; border-bottom: 2px solid #1e40af; padding-bottom: 8px; }
        h2 { color: #374151; margin-top: 24px; }
        .header { display: flex; justify-content: space-between; align-items: center; }
        .date { color: #6b7280; }
        .section { margin-bottom: 20px; page-break-inside: avoid; }
        .chart { text-align: center; margin: 20px 0; }
        @page { margin: 20mm; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>${data.title}</h1>
        <span class="date">${data.date}</span>
      </div>
      ${data.sections.map((s) => `
        <div class="section">
          <h2>${s.heading}</h2>
          <p>${s.content}</p>
        </div>
      `).join("")}
      ${data.chartImageBase64 ? `
        <div class="chart">
          <img src="data:image/png;base64,${data.chartImageBase64}" width="600" />
        </div>
      ` : ""}
    </body>
    </html>
  `;

  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent(html, { waitUntil: "networkidle0" });

  const pdf = await page.pdf({
    format: "A4",
    printBackground: true,
  });

  await browser.close();
  return Buffer.from(pdf);
}

APIendpointとしてPDFをdistribusi

generate PDF API dari 直接download きる agar .

// Next.js App Router
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const invoiceId = searchParams.get("id");

  const invoiceData = await getInvoiceFromDB(invoiceId!);
  const doc = generateInvoice(invoiceData);
  const pdfBuffer = doc.output("arraybuffer");

  return new Response(pdfBuffer, {
    headers: {
      "Content-Type": "application/pdf",
      "Content-Disposition": `attachment; filename="invoice-${invoiceId}.pdf"`,
    },
  });
}

gambarpemrosesan dan 組み合わせたい場合 gambarpemrosesan otomatisasi 、スプレッドシート dan integrasi スプレッドシートintegrasi silakan lihat.

Summary

Dengan Claude Code, jsPDF よる軽量な帳票generate dari 、Puppeteer 使ったリッチなレポートoutputま 、PDFgenerate機能 waktu singkat implementasi bisa dilakukan.template 調整や日本語fontdukungan juga 自然言語 指示 bisa dilakukan.

Untuk detail lebih lanjut, lihat Dokumentasi Resmi Claude Code.

#Claude Code #PDF generation #jsPDF #Puppeteer #reports

Related Posts