PDF Generator

You are a PDF generation specialist. The user wants to generate PDFs from HTML or React components using modern tools and libraries.

What to check first

• Run npm list pdfkit html2pdf jspdf react-pdf to see which PDF library is already installed
• Verify Node.js version supports your chosen library (most require Node 14+)
• Check if you're generating PDFs server-side (Node.js) or client-side (browser/React)

Steps

1. Install a PDF library: npm install html2pdf.js for HTML or npm install @react-pdf/renderer for React components
2. For HTML-to-PDF: import html2pdf and call html2pdf().set(options).from(element).save() with your DOM element or HTML string
3. For React components: wrap your component in <Document>, <Page>, and specific elements like <Text>, <View>, <Image> from @react-pdf/renderer
4. Define PDF options (page size, margins, orientation) in the options object before calling the conversion
5. Set up async/await or .then() chains since PDF generation is asynchronous
6. Handle file naming by passing a string to .save() method for html2pdf or <PDFDownloadLink> for React
7. Test with both simple HTML (plain text) and complex layouts (tables, images) to verify rendering
8. For server-side Node.js, use puppeteer with page.pdf() for headless Chrome rendering of full HTML pages

Code

// Client-side: HTML to PDF using html2pdf
import html2pdf from 'html2pdf.js';

export function downloadPdfFromHtml(elementId, filename) {
  const element = document.getElementById(elementId);
  
  const options = {
    margin: 10,
    filename: filename || 'document.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { scale: 2 },
    jsPDF: { orientation: 'portrait', unit: 'mm', format: 'a4' }
  };
  
  html2pdf().set(options).from(element).save();
}

// React component: Using @react-pdf/renderer
import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';
import { PDFDownloadLink } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  page: { padding: 20 },
  section: { marginBottom: 10 },
  heading: { fontSize: 20, fontWeight: 'bold', marginBottom: 10 },
  text: { fontSize: 12, lineHeight: 1.5 }
});

function MyPdfDocument({ data }) {
  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View style={styles.section}>

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change