Lovablefeatureintermediate

Add PDF Generation to Lovable App

Add PDF export for invoices and reports with branded templates and download functionality.

What you'll get

PDF generation for invoices and reports with branded templates, preview, and download functionality.

The Prompt

Add PDF generation and export functionality to my Lovable app.

REQUIREMENTS:
1. Install and configure a client-side PDF library (jsPDF with html2canvas, or @react-pdf/renderer).
2. Create a branded invoice PDF template with: company logo, invoice number, date, bill-to info, line items table (description, quantity, rate, amount), subtotal, tax, total, payment terms, and footer with company info.
3. Create a report PDF template with: title, date range, summary metrics, data table, and charts rendered as images.
4. Add a "Download PDF" button on invoice and report pages that generates and downloads the PDF.
5. Add a "Preview" button that opens the PDF in a new browser tab before downloading.
6. Support dynamic data — pull invoice or report data from Supabase and populate the template.
7. Format currency, dates, and numbers properly in the PDF.
8. Add batch export: select multiple records and generate a combined PDF or ZIP of individual PDFs.

DATABASE:
- No new tables. Uses existing invoice/report data.
- Optionally log PDF downloads in an "export_logs" table.

SECURITY:
- Generate PDFs client-side to avoid server load.
- Ensure users can only export their own data (respect RLS).

Replace these variables

VariableReplace with
[DOCUMENT_TYPE]Type of document to generate (invoice, report, receipt)
[BRAND_COLOR]Primary brand color for PDF styling

Tips for best results

Use @react-pdf/renderer for complex layouts — it gives better control than html2canvas.

Include your logo as a base64-encoded string to avoid CORS issues in PDF generation.

Follow-up prompts

Add email attachment

Add the ability to email the generated PDF directly to a client using a Resend Edge Function. Include a customizable email message.

Add PDF storage

Save generated PDFs to Supabase Storage so users can access them later from a document library.

Related prompts