Ivoice Generator

How I Built Real Vector PDF Invoices in My SaaS — React Frontend + NestJS Backend

No canvas. No screenshots. No html2canvas. Just clean, selectable, zoomable, printable PDFs — exactly like Tally or Excel generates them.

---

I'm building a full-stack event management SaaS called HostWithMe where vendors can generate GST-compliant Tax Invoices for their clients. The invoice had to feel professional — the kind a CA would accept, not a screenshot stapled to an email.

This post walks through the entire implementation: the thinking behind the approach, the React PDF layout, the NestJS API, the logo embedding fix, and every gotcha I hit along the way.

---

The Problem with the "Easy" Approaches

When most developers need to generate a PDF from a React page, they reach for one of these:

• window.print() with print CSS

• html2canvas → jsPDF

• Puppeteer to screenshot the page

These all have the same fatal flaw: they generate image-based PDFs. The text inside is not real text — it's pixels baked into an image layer. You can't:

• Select or copy text

• Search inside the PDF

• Zoom in without it blurring

• Have screen readers parse it

That's not a PDF. That's a fancy screenshot.

What I needed was what Tally, QuickBooks, and Excel produce — a vector PDF where every character is a real typographic glyph, every line is a real vector path, and the file is a true document.

---

The Right Tool: @react-pdf/renderer

@react-pdf/renderer is a React renderer that targets PDFKit instead of the DOM. You write JSX, but instead of HTML elements it has its own primitives: <Document>, <Page>, <View>, <Text>, <Image>. It compiles your component tree into a real .pdf file with embedded fonts and vector graphics.

npm install @react-pdf/renderer

The key mental shift: this is not a styled HTML page. You're writing a layout engine for print. No Tailwind, no CSS classes — everything is inline StyleSheet objects, similar to React Native.

---

Architecture Overview

Here's how the full system is wired together:

┌─────────────────────────────────────┐
│         React Frontend              │
│                                     │
│  ProfessionalInvoiceView.tsx        │
│  (HTML preview + Download button)   │
│              │                      │
│              │ POST /api/invoice/pdf │
│              ▼                      │
└─────────────────────────────────────┘
               │
               ▼
┌─────────────────────────────────────┐
│         NestJS Backend              │
│                                     │
│  InvoiceController                  │
│       │                             │
│       ▼                             │
│  InvoiceService.generatePdf()       │
│       │                             │
│       ├── fetch logo → base64       │
│       ├── renderToBuffer()          │
│       └── stream PDF response       │
└─────────────────────────────────────┘

Two separate concerns:

1. The PDF Document component — pure layout, no side effects

2. The API layer — data fetching, image resolution, streaming

Let me walk through both.

---

Part 1: The React PDF Document Component

The Layout Philosophy

I needed to match this exact invoice structure:

┌──────────────────────────────────────────┐
│ [Logo]    TAX INVOICE      Managed By    │
│           (CGST Rule 46)   HOSTWITHME.   │
├──────────────────────────────────────────┤
│ Graceful Events Pvt Ltd                  │
│ Address | GSTIN | PAN | State            │
├──────────────────────┬───────────────────┤
│ BILL TO (CLIENT)     │ INVOICE DETAILS   │
│ khushi.p             │ INV-20260219-0001 │
│ [email protected]   │ Issue: 19-Feb-26  │
│ State: Gujarat       │ Due: 21-Feb-26    │
├──────────┬──────┬────┴──────────────────┤
│ Sr  Desc │ HSN  │ Qty  Rate  Taxable  Total│
├──────────┴──────┴───────────────────────┤
│                        Subtotal ₹84,400 │
│                        CGST    ₹7,596   │
│                        SGST    ₹7,596   │
│                  GRAND TOTAL ₹99,592    │
├──────────────────────────────────────────┤
│ Amount in Words: Rupees Ninety Nine...   │
├──────────────────────────────────────────┤
│ HSN/SAC Summary Control Block            │
├──────────────────────────────────────────┤
│ Terms & Conditions    FOR GRACEFUL EVENTS│
│                       (Authorized Sign.) │
└──────────────────────────────────────────┘

File: InvoicePDFDocument.tsx

import {
  Document, Page, Text, View, StyleSheet, Image
} from "@react-pdf/renderer";

// All styles are defined upfront — no runtime class names
const S = StyleSheet.create({
  page: {
    fontFamily: "Helvetica",
    fontSize: 9,
    color: "#1a1a1a",
    paddingTop: 36,
    paddingBottom: 48,
    paddingHorizontal: 40,
    lineHeight: 1.4,
  },
  // ... (full styles in the repo)
});

Key Patterns in @react-pdf/renderer

1. <View> is your <div>

Everything is a View. Flex is the only layout model — and it defaults to flexDirection: "column", unlike CSS which defaults to row.

// Two-column layout
<View style={{ flexDirection: "row", gap: 16 }}>
  <View style={{ flex: 1 }}>
    {/* Bill To */}
  </View>
  <View style={{ flex: 1 }}>
    {/* Invoice Details */}
  </View>
</View>

2. Tables are just nested Views with borders

There's no <table> element. You fake it with borders:

// Table header row
<View style={{ flexDirection: "row", backgroundColor: "#f0f0f0", borderWidth: 0.5 }}>
  <View style={{ width: "5%", padding: 4 }}>
    <Text style={{ fontFamily: "Helvetica-Bold", fontSize: 8 }}>Sr.</Text>
  </View>
  <View style={{ width: "35%", padding: 4 }}>
    <Text style={{ fontFamily: "Helvetica-Bold", fontSize: 8 }}>Description</Text>
  </View>
  {/* more columns... */}
</View>

// Table data row
{items.map((item, i) => (
  <View key={i} style={{ flexDirection: "row", borderBottomWidth: 0.5 }}>
    <View style={{ width: "5%", padding: 4 }}>
      <Text>{i + 1}</Text>
    </View>
    <View style={{ width: "35%", padding: 4 }}>
      <Text style={{ fontFamily: "Helvetica-Bold" }}>{item.serviceName}</Text>
    </View>
    {/* more cells... */}
  </View>
))}

3. Bold text requires a different fontFamily

There's no fontWeight: "bold" that just works. You must switch the fontFamily:

// ❌ This doesn't render bold in most cases
<Text style={{ fontWeight: "bold" }}>Hello</Text>

// ✅ This works reliably
<Text style={{ fontFamily: "Helvetica-Bold" }}>Hello</Text>

Built-in fonts available: Helvetica, Helvetica-Bold, Helvetica-Oblique, Helvetica-BoldOblique, and the same variants for Courier and Times-Roman.

4. The <Image> component for logos

{logoBase64 ? (
  <Image
    src={logoBase64}  // "data:image/png;base64,..."
    style={{ width: 80, height: 40, objectFit: "contain" }}
  />
) : (
  <Text style={{ fontFamily: "Helvetica-Bold", fontSize: 11 }}>
    {vendor.legalBusinessName}
  </Text>
)}

More on why logoBase64 and not a URL — see Part 3.

5. The Grand Total row — dark background

<View style={{ flexDirection: "row", backgroundColor: "#1a1a1a" }}>
  <Text style={{ flex: 1, padding: 5, color: "#fff", fontFamily: "Helvetica-Bold" }}>
    GRAND TOTAL
  </Text>
  <Text style={{ width: "42%", padding: 5, color: "#fff", textAlign: "right", fontFamily: "Helvetica-Bold" }}>
    {fmt(lineItemsDoc.grandTotal)}
  </Text>
</View>

The HSN Summary Block

This is an important GST requirement — a control block at the bottom grouping tax amounts by HSN/SAC code. I built it by reducing the line items:

const hsnMap: Record<string, { taxableValue: number; cgst: number; sgst: number; igst: number; totalTax: number }> = {};

items.forEach((item) => {
  const hsn = item.hsnOrSacCode || "N/A";
  if (!hsnMap[hsn]) {
    hsnMap[hsn] = { taxableValue: 0, cgst: 0, sgst: 0, igst: 0, totalTax: 0 };
  }
  hsnMap[hsn].taxableValue += item.taxableValue;
  hsnMap[hsn].cgst += item.cgstAmount || 0;
  hsnMap[hsn].sgst += item.sgstAmount || 0;
  hsnMap[hsn].igst += item.igstAmount || 0;
  hsnMap[hsn].totalTax += (item.cgstAmount || 0) + (item.sgstAmount || 0) + (item.igstAmount || 0);
});

const hsnRows = Object.entries(hsnMap);

Amount in Words — Indian Number System

Standard number-to-words doesn't handle Indian numbering (Lakhs, Crores). I wrote a custom converter:

function convertNumberToWords(num: number): string {
  const ones = ["","One","Two","Three","Four","Five","Six","Seven",
    "Eight","Nine","Ten","Eleven","Twelve","Thirteen","Fourteen",
    "Fifteen","Sixteen","Seventeen","Eighteen","Nineteen"];
  const tens = ["","","Twenty","Thirty","Forty","Fifty",
    "Sixty","Seventy","Eighty","Ninety"];

  const convert = (n: number): string => {
    if (n < 20) return ones[n];
    if (n < 100) return tens[Math.floor(n / 10)] + (n % 10 ? " " + ones[n % 10] : "");
    if (n < 1000) return ones[Math.floor(n / 100)] + " Hundred" +
      (n % 100 ? " and " + convert(n % 100) : "");
    return "";
  };

  const handleBig = (n: number): string => {
    if (n === 0) return "";
    let res = "";
    if (n >= 10000000) { res += handleBig(Math.floor(n / 10000000)) + " Crore "; n %= 10000000; }
    if (n >= 100000) { res += handleBig(Math.floor(n / 100000)) + " Lakh "; n %= 100000; }
    if (n >= 1000) { res += handleBig(Math.floor(n / 1000)) + " Thousand "; n %= 1000; }
    res += convert(n);
    return res;
  };

  return handleBig(Math.floor(num)).trim() + " Only";
}

// ₹99,592 → "Rupees Ninety Nine Thousand Five Hundred and Ninety Two Only"

---

Part 2: The NestJS Backend

In my stack, the PDF is generated server-side via a NestJS API. This is the recommended approach because:

• renderToBuffer() runs in Node — no browser needed

• You can pre-process images, fetch data, and validate before rendering

• You can also store the PDF to S3 / send via email in the same flow

Controller

// invoice.controller.ts

@Controller('invoices')
export class InvoiceController {

  constructor(private readonly invoiceService: InvoiceService) {}

  @Post(':id/pdf')
  async downloadPdf(
    @Param('id') invoiceId: string,
    @Res() res: Response,
  ) {
    const { buffer, filename } = await this.invoiceService.generatePdf(invoiceId);

    res.set({
      'Content-Type': 'application/pdf',
      'Content-Disposition': `attachment; filename="${filename}"`,
      'Content-Length': buffer.byteLength,
    });

    res.end(buffer);
  }
}

Service

// invoice.service.ts

import { renderToBuffer } from '@react-pdf/renderer';
import React from 'react';
import { InvoicePDFDocument } from './InvoicePDFDocument';

@Injectable()
export class InvoiceService {

  async generatePdf(invoiceId: string) {
    // 1. Fetch invoice + line items from DB
    const invoice = await this.invoiceModel
      .findById(invoiceId)
      .populate('vendorId')
      .lean();

    const lineItemsDoc = await this.lineItemModel
      .findOne({ invoiceId })
      .lean();

    if (!invoice || !lineItemsDoc) {
      throw new NotFoundException('Invoice not found');
    }

    // 2. Resolve vendor logo to base64 (critical — see Part 3)
    const logoBase64 = await this.fetchImageAsBase64(
      invoice.vendorId?.logoUrl
    );

    // 3. Map DB fields to PDF component props
    //    (DB field names may differ from the PDF component's expected shape)
    const pdfData = this.mapInvoiceToPdfProps(invoice, lineItemsDoc);

    // 4. Render to PDF buffer
    const buffer = await renderToBuffer(
      React.createElement(InvoicePDFDocument, {
        ...pdfData,
        logoBase64,
        managedByName: 'HOSTWITHME.',
      })
    );

    return {
      buffer,
      filename: `Invoice_${invoice.invoiceNumber}.pdf`,
    };
  }

  private mapInvoiceToPdfProps(invoice: any, lineItemsDoc: any) {
    // Line items in DB use `serviceName` but PDF component uses `description`
    const items = lineItemsDoc.items.map((item: any) => ({
      description: item.serviceName,
      hsnOrSacCode: item.hsnOrSacCode,
      quantity: item.quantity,
      rate: item.unitPrice,
      taxableValue: item.taxableValue,
      cgstAmount: item.cgstAmount,
      sgstAmount: item.sgstAmount,
      igstAmount: item.igstAmount,
      totalAmount: item.totalAmount,
    }));

    return {
      invoice: {
        invoiceNumber: invoice.invoiceNumber,
        issueDate: invoice.issueDate,
        dueDate: invoice.dueDate,
        placeOfSupply: invoice.placeOfSupply,
        terms: invoice.terms,
        vendorSnapshot: invoice.vendorSnapshot,
        clientSnapshot: invoice.clientSnapshot,
      },
      lineItemsDoc: {
        items,
        totalBeforeTax: lineItemsDoc.totalBeforeTax,
        totalCgst: lineItemsDoc.totalCgst,
        totalSgst: lineItemsDoc.totalSgst,
        totalIgst: lineItemsDoc.totalIgst,
        totalTaxAmount: lineItemsDoc.totalTaxAmount,
        grandTotal: lineItemsDoc.grandTotal,
      },
    };
  }
}

Note for Next.js users: If you're not using NestJS, the equivalent is an App Router API route (app/api/invoice/pdf/route.ts) with renderToBuffer() called inside a POST handler. The logic is identical — only the HTTP wrapper differs.

---

Part 3: The Logo Problem (and Why It's Subtle)

This is the part that caught me off guard and took me a while to debug.

What I tried first

// ❌ Using the Cloudinary URL directly
<Image src="https://res.cloudinary.com/dkuopk3dz/image/upload/..." />

The logo showed perfectly in the browser preview (using a regular <img> tag). But in the generated PDF — blank. Just empty space where the logo should be.

Why it fails

@react-pdf/renderer runs on the Node.js server, not in the browser. When it tries to fetch a remote URL like a Cloudinary image:

1. CORS: Cloudinary and other CDNs set CORS headers for browser requests. Node's fetch is not a browser — it sends different headers and can get blocked or silently fail

2. No browser cache: The image isn't pre-loaded like it would be in a browser

3. Timing: @react-pdf/renderer doesn't always await remote image fetches reliably

The fix: pre-fetch and convert to base64

The solution is to fetch the image yourself, on the server, before calling renderToBuffer. Then pass the image as a base64 data URI — no network call needed during rendering.

async fetchImageAsBase64(url: string): Promise<string | null> {
  if (!url) return null;

  try {
    const response = await fetch(url, {
      headers: {
        // Mimic a browser User-Agent — some CDNs check this
        'User-Agent': 'Mozilla/5.0 (compatible; InvoicePDF/1.0)',
      },
    });

    if (!response.ok) return null;

    const contentType = response.headers.get('content-type') || 'image/png';
    const arrayBuffer = await response.arrayBuffer();
    const base64 = Buffer.from(arrayBuffer).toString('base64');

    return `data:${contentType};base64,${base64}`;
  } catch {
    return null; // Graceful fallback — render text instead of crashing
  }
}

Then in the PDF component:

// ✅ Pass base64 — no network call needed during render
{logoBase64 ? (
  <Image src={logoBase64} style={{ width: 80, height: 40, objectFit: "contain" }} />
) : (
  <Text style={{ fontFamily: "Helvetica-Bold" }}>
    {vendor.legalBusinessName}
  </Text>
)}

This is the same reason tools like Puppeteer and wkhtmltopdf need --allow-local-file-access or explicit network waiting — rendering engines don't always behave like a real browser loading a page.

---

Part 4: The React Frontend Integration

On the frontend, two things exist side by side:

1. The HTML preview — your existing React component, rendered normally in the browser using Tailwind/CSS — this is what the user sees on screen

2. The PDF download — calls the backend API, gets a binary blob, triggers a download

They're completely independent. The HTML preview doesn't need to match the PDF layout pixel-perfectly — they're built with different tools for different purposes.

The download utility

// lib/generateInvoicePDF.ts

export async function generateInvoicePDF(invoiceId: string) {
  const response = await fetch(`/api/invoices/${invoiceId}/pdf`, {
    method: 'POST',
  });

  if (!response.ok) {
    throw new Error('PDF generation failed');
  }

  const blob = await response.blob();

  // Trigger browser download
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `Invoice_${invoiceId}.pdf`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);

  // Clean up after 5s
  setTimeout(() => URL.revokeObjectURL(url), 5000);
}

The button in the component

const [loading, setLoading] = useState(false);

const handleDownload = async () => {
  setLoading(true);
  try {
    await generateInvoicePDF(invoice._id);
  } catch (err) {
    toast.error('Could not generate PDF');
  } finally {
    setLoading(false);
  }
};

<Button onClick={handleDownload} disabled={loading}>
  {loading ? <Loader2 className="animate-spin" /> : <Download />}
  {loading ? 'Generating…' : 'Download PDF'}
</Button>

Preview in new tab instead of downloading:

// Change action: "download" → "preview"
window.open(URL.createObjectURL(blob), '_blank');

---

Complete Data Flow — End to End

1. User clicks "Download PDF"
         │
         ▼
2. Frontend: POST /api/invoices/:id/pdf
         │
         ▼
3. NestJS Controller receives request
         │
         ▼
4. InvoiceService.generatePdf(id)
         │
         ├── Query invoice from MongoDB (with vendorId populated)
         ├── Query lineItemsDoc from MongoDB
         ├── fetchImageAsBase64(vendorId.logoUrl) ← HTTP fetch to Cloudinary
         └── mapInvoiceToPdfProps(invoice, lineItemsDoc)
         │
         ▼
5. renderToBuffer(
     React.createElement(InvoicePDFDocument, {
       invoice,
       lineItemsDoc,
       logoBase64,         // ← "data:image/png;base64,..."
       managedByName: "HOSTWITHME."
     })
   )
         │
         ▼
6. NestJS streams Buffer as application/pdf
         │
         ▼
7. Frontend receives Blob
         │
         ▼
8. URL.createObjectURL(blob) → <a download> → browser saves file
         │
         ▼
9. User opens PDF: text is selectable ✅, zoomable ✅, searchable ✅

---

Gotchas Summary

Problem	Why it happens	Fix
Logo missing in PDF	Remote URL fetch fails in Node / CORS	Pre-fetch to base64 before renderToBuffer
fontWeight: "bold" not working	@react-pdf has limited CSS support	Use fontFamily: "Helvetica-Bold"
display: flex not needed	@react-pdf defaults to column flex	Use flexDirection: "row" explicitly
₹ rupee symbol not rendering	Built-in fonts don't have all Unicode	Register a custom font (Noto Sans)
PDF cuts off mid-page	Fixed height containers overflow	Use minHeight, avoid fixed heights on Page
Next.js SSR error with @react-pdf	Library uses Node APIs	Only import in API routes or "use server" files
Canvas error in Next.js	Optional peer dependency	Add canvas: false to webpack aliases

Fixing the Rupee symbol (if needed)

If your ₹ renders as a box or empty:

import { Font } from "@react-pdf/renderer";

Font.register({
  family: "NotoSans",
  fonts: [
    { src: "https://fonts.gstatic.com/s/notosans/v28/o-0IIpQlx3QUlC5A4PNr6DRAW.woff2" },
    { src: "https://fonts.gstatic.com/s/notosans/v28/o-0NIpQlx3QUlC5A4PNjXhFVZNyB.woff2", fontWeight: "bold" },
  ],
});

// Then in styles:
const S = StyleSheet.create({
  page: { fontFamily: "NotoSans", ... }
});

Next.js webpack config fix

// next.config.js
module.exports = {
  webpack: (config) => {
    config.resolve.alias.canvas = false;
    return config;
  },
};

---

What I'd Do Differently

For scale: Move PDF generation to a dedicated microservice or a background job queue (BullMQ). Generating PDFs is CPU-bound and you don't want it blocking your main NestJS event loop under load.

For logos: Store a pre-processed base64 version of the logo in the vendor document at upload time — skip the runtime fetch entirely.

For complex layouts: Consider pdfmake if you need more control over page breaks, multi-page tables, or watermarks. It has a lower-level API but is more predictable for complex documents.

For email delivery: After renderToBuffer, you can directly attach the buffer to a Nodemailer email:

await transporter.sendMail({
  attachments: [{ filename: 'invoice.pdf', content: buffer }]
});

---

Final Thoughts

The moment I opened the generated PDF and could select the invoice number, copy the vendor address, and Ctrl+F search for the client name — that was the payoff. It felt like a real document, not a hack.

The key lessons:

• @react-pdf/renderer is the right tool for vector PDFs in a JS/TS stack. It's mature, actively maintained, and the output quality is excellent.

• Never pass remote image URLs to the renderer. Always pre-fetch and convert to base64 server-side.

• The HTML preview and the PDF are separate concerns. Don't try to share the same component for both — they're built for completely different rendering engines.

• Think print-first. Minimal color, clean borders, readable at 100% zoom and at A4 print size.

The full source for InvoicePDFDocument.tsx, the NestJS service, and the client utility function are available in the project repo.

---

Building HostWithMe — an event management platform for Indian vendors. Follow along for more posts on GST compliance, full-stack architecture, and shipping fast.

---

Tags: React NestJS PDF TypeScript GST Invoice @react-pdf/renderer Full Stack