PHP及CodeIgniter中基于HTML生成发票PDF的最优方案咨询

Hey there! I totally get the frustration when jsPDF + html2canvas doesn't deliver the polished PDF output you want for invoices—those templates often have complex styling that can break in conversion. Let me share a few solid alternatives that work better for structured, styled documents like invoices:

1. Puppeteer (Headless Chrome) #

This is my go-to for preserving complex HTML/CSS styling perfectly. It uses a real Chrome browser instance to render your page, so it handles fonts, backgrounds, flexbox layouts, and pagination flawlessly.

How to use it: #

You’ll need Node.js for this (you can set up a simple backend endpoint if you want frontend triggers):

const puppeteer = require('puppeteer');

async function generateInvoicePDF() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // Load your invoice HTML (local file or hosted URL)
  await page.goto('file:///path/to/your/invoice.html', { waitUntil: 'networkidle0' });
  
  // Generate PDF with precise settings
  await page.pdf({
    path: 'invoice.pdf',
    format: 'A4',
    printBackground: true, // Critical for retaining background styles
    margin: { top: '20px', right: '20px', bottom: '20px', left: '20px' }
  });
  
  await browser.close();
}

For frontend use, you can wrap this in a simple Express API—your frontend button sends a request to the API, which generates and returns the PDF for download.

2. WeasyPrint #

WeasyPrint is built specifically for converting HTML/CSS to PDF, and it’s fantastic for documents that need strict pagination control (like invoices with headers/footers). It fully supports CSS Paged Media specs, so you can define page breaks, repeating headers, and margins with pure CSS.

How to use it: #

It’s a Python library, so you’ll need a Python backend:

from weasyprint import HTML

# Convert your HTML file to PDF, including stylesheets
HTML('path/to/your/invoice.html').write_pdf(
  'invoice.pdf',
  stylesheets=['path/to/your/invoice-styles.css']
)

You can pair this with a Flask or Django endpoint to let frontend users trigger PDF generation easily.

3. PDFMake #

If you don’t mind moving away from HTML templates a bit, PDFMake lets you build PDFs with a declarative JSON syntax. It’s great for fully customized, dynamic invoices and works entirely in the frontend.

How to use it: #

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';

pdfMake.vfs = pdfFonts.pdfMake.vfs;

function generateInvoicePDF() {
  const docDefinition = {
    content: [
      { text: 'INVOICE', style: 'header' },
      { text: 'Customer Details:', style: 'subheader' },
      { text: 'Jane Smith\n456 Oak Ave\nMetro City, 67890' },
      {
        table: {
          headerRows: 1,
          widths: ['*', 'auto', 'auto', 'auto'],
          body: [
            ['Item', 'Qty', 'Price', 'Total'],
            ['Wireless Mouse', '2', '$25', '$50'],
            ['Keyboard', '1', '$40', '$40']
          ]
        },
        style: 'invoiceTable'
      },
      { text: 'Total: $90', style: 'total' }
    ],
    styles: {
      header: { fontSize: 22, bold: true, margin: [0, 0, 0, 15] },
      subheader: { fontSize: 16, bold: true, margin: [0, 10, 0, 5] },
      invoiceTable: { margin: [0, 10, 0, 15] },
      total: { fontSize: 18, bold: true, alignment: 'right' }
    }
  };

  pdfMake.createPdf(docDefinition).download('invoice.pdf');
}

Quick Recommendation: #

• If your invoice has complex styling (custom fonts, backgrounds, dynamic layouts), go with Puppeteer or WeasyPrint.
• If you want a pure frontend solution and don’t mind rebuilding your template in JSON, PDFMake is perfect.

内容的提问来源于stack exchange，提问作者deepak