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

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 के साथ Implement PDF Generation कैसे करें

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

jsPDFで請求書 generateする

PuppeteerでHTML सेPDF変換

APIendpoint के रूप मेंPDFを配信

Summary

मुफ़्त PDF: 5 मिनट में Claude Code चीटशीट

संबंधित लेख

हर दिन बहुभाषी Claude Code लेख प्रकाशित करने से पहले 7 जांचें

Codex Automations क्या है? AI से content ops, analysis और deploy करवाने का तरीका

Claude Code × GCP Cloud Functions संपूर्ण गाइड | सर्वरलेस फंक्शन तेज़ी से विकसित करें