ClaudeCodeLab
Use Cases

Claude Code के साथ Implement PDF Generation कैसे करें

Claude Code का उपयोग करके implement pdf generation सीखें। Practical code examples और step-by-step guidance शामिल है।

PDFgenerateको Claude Code सेefficientlyimplement करना

請求書、レポート、帳票 आदिのPDF出力は業務アプリで頻निकालनाるfeatures है।Claude Code से、template設計 सेPDFgenerateロジック तक一括でimplementationでき है।

jsPDFで請求書 generateする

軽量なjsPDFlibraryを使った請求書generateの例 है।

> jsPDFで日本語supportの請求書PDF generateするfunctionを作って。
> 会社名、宛先、明細行、合計金額を含めて。
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 सेPDF変換

complexなlayout के case में、HTMLtemplate सेPDF generateする方法がconvenient है।

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を配信

generateしたPDFをAPI से直接downloadできる तरहし है।

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

画像processing के साथ combineたいcase में画像processingのautomationを、スプレッドシートとのintegrationはスプレッドシートintegrationदेखें。

Summary

Claude Code का उपयोग करके、jsPDFによる軽量な帳票generate से、Puppeteerを使ったリッチなレポート出力 तक、PDFgeneratefeaturesをकम समय मेंimplementationでき है।templateの調整や日本語fontsupportも自然言語で指示でき है।

विस्तार से जानने के लिएClaude Codeofficial documentationをदेखें。

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

Related Posts