# PDF Generation: Create PDFs from HTML # PDF Generation from HTML: Puppeteer and Libraries ## Problem Converting HTML to PDF is essential for generating reports, invoices, certificates, and documents programmatically. Manual conversion is time-consuming, and browser-based solutions lack automation. You need a reliable, scalable way to transform HTML content into professional PDFs. ## Solution Use **Puppeteer** (headless Chrome automation) combined with specialized libraries for robust PDF generation. This approach handles complex layouts, CSS, JavaScript rendering, and provides fine-grained control over output. ## Code ### 1. Basic Puppeteer PDF Generation ```javascript const puppeteer = require('puppeteer'); const fs = require('fs'); async function generatePDF() { const browser = await puppeteer.launch(); const page = await browser.newPage(); // Load HTML content const htmlContent = `

Invoice #12345

Date: ${new Date().toLocaleDateString()}

ItemQtyPrice
Widget A2$50
Widget B1$75

Thank you for your business!

`; await page.setContent(htmlContent); await page.pdf({ path: 'invoice.pdf', format: 'A4' }); await browser.close(); console.log('PDF generated: invoice.pdf'); } generatePDF().catch(console.error); ``` ### 2. Advanced Configuration with Headers/Footers ```javascript const puppeteer = require('puppeteer'); async function generateAdvancedPDF() { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.setContent(`

Annual Report 2024

This is a comprehensive report with multiple pages.

Lorem ipsum dolor sit amet...

`); await page.pdf({ path: 'report.pdf', format: 'A4', margin: { top: '1cm', right: '1cm', bottom: '1cm', left: '1cm' }, headerTemplate: `
Annual Report
`, footerTemplate: `
Page of
`, displayHeaderFooter: true, printBackground: true }); await browser.close(); } generateAdvancedPDF().catch(console.error); ``` ### 3. HTML File to PDF ```javascript const puppeteer = require('puppeteer'); const path = require('path'); async function htmlFileToPDF(htmlFilePath, outputPath) { const browser = await puppeteer.launch(); const page = await browser.newPage(); // Load from file with proper file:// URL const fileUrl = `file://${path.resolve(htmlFilePath)}`; await page.goto(fileUrl, { waitUntil: 'networkidle2' }); await page.pdf({ path: outputPath, format: 'A4', scale: 1, printBackground: true }); await browser.close(); console.log(`PDF saved to: ${outputPath}`); } htmlFileToPDF('./template.html', './output.pdf').catch(console.error); ``` ### 4. Dynamic Content with Wait Conditions ```javascript const puppeteer = require('puppeteer'); async function generateDynamicPDF(data) { const browser = await puppeteer.launch(); const page = await browser.newPage(); const htmlContent = `

Product Catalog

`; await page.setContent(htmlContent); // Wait for JavaScript to render await page.waitForSelector('#products', { timeout: 5000 }); await page.pdf({ path: 'catalog.pdf', format: 'A4', printBackground: true }); await browser.close(); } const productData = [ { name: 'Laptop', description: 'High-performance device', price: '$999' }, { name: 'Mouse', description: 'Wireless mouse', price: '$29' } ]; generateDynamicPDF(productData).catch(console.error); ``` ### 5. Using html2pdf Library (Client-Side Alternative) ```html

Invoice

Amount: $500

``` ### 6. Batch PDF Generation ```javascript const puppeteer = require('puppeteer'); const fs = require('fs').promises; const path = require('path'); async function batchGeneratePDFs(documents) { const browser = await puppeteer.launch(); for (const doc of documents) { const page = await browser.newPage(); await page.setContent(doc.html); await page.pdf({ path: path.join('pdfs', `${doc.id}.pdf`), format: 'A4' }); await page.close(); console.log(`Generated: ${doc.id}.pdf`); } await browser.close(); } const documents = [ { id: 'invoice-001', html: '

Invoice 001

' }, { id: 'invoice-002', html: '

Invoice 002

' } ]; batchGeneratePDFs(documents).catch(console.error); ``` ### 7. Express.js Integration ```javascript const express = require('express'); const puppeteer = require('puppeteer'); const app = express(); app.use(express.json()); app.post('/generate-pdf', async (req, res) => { try { const { html, filename } = req.body; const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.setContent(html); const pdfBuffer = await page.pdf({ format: 'A4' }); await browser.close(); res.setHeader('Content-Type', 'application/pdf'); res.setHeader('Content-Disposition', `attachment; filename="${filename}"`); res.send(pdfBuffer); } catch (error) { res.status(500).json({ error: error.message }); } }); app.listen(3000, () => console.log('Server running on port 3000')); ``` ## Tips ### Performance Optimization - **Reuse browser instance**: Create one browser and multiple pages instead of launching new browsers - **Disable unnecessary features**: Use `--no-sandbox`, `--disable-setuid-sandbox` for production - **Set viewport**: `page.setViewport({ width: 1920, height: 1080 })` for consistent rendering ### Quality & Rendering - **Wait for content**: Use `waitForNavigation()`, `waitForSelector()`, or `waitForFunction()` before PDF generation - **Print background**: Set `printBackground: true` for colored backgrounds and images - **Scale factor**: Adjust `scale` (0.5-2) for resolution control ### Error Handling ```javascript try { // PDF generation code } catch (error) { console.error('PDF generation failed:', error); // Fallback or retry logic } ``` ### Library Comparison | Library | Best For | Pros | Cons | |---------|----------|------|------| | **Puppeteer** | Complex layouts, JS rendering | Full browser control, accurate | Resource-heavy | | **html2pdf** | Client-side, simple docs | Lightweight, no server needed | Limited CSS support | | **pdfkit** | Custom PDFs, low-level control | Lightweight, flexible | Requires manual layout | | **wkhtmltopdf** | Server-side, legacy | Fast, stable | Deprecated, maintenance issues | ### Security Considerations - Sanitize HTML input to prevent injection attacks - Validate file paths to prevent directory traversal - Implement rate limiting for PDF generation endpoints - Use sandboxed environments for untrusted content ### Memory Management ```javascript // Close resources properly await page.close(); await browser.close(); // For batch operations, reuse browser const browser = await puppeteer.launch(); // ... multiple pages await browser.close();