PDF Export

Export your Fumadocs documentation pages as high-quality PDF files with automatic discovery and batch processing.

Features

Quick Start

pnpm dev

pdfs/
├── index.pdf
├── docs-getting-started.pdf
└── docs-features-pdf-export.pdf

How It Works

Print Styles

Special CSS in app/global.css hides navigation elements and optimizes for printing:

@media print {
  #nd-docs-layout {
    --fd-sidebar-width: 0px !important;
  }
  #nd-sidebar {
    display: none;
  }
  pre,
  img {
    page-break-inside: avoid;
  }
}

Component Overrides

When NEXT_PUBLIC_PDF_EXPORT=true, interactive components render expanded:

const isPrinting = process.env.NEXT_PUBLIC_PDF_EXPORT === "true";

return {
  Accordion: isPrinting ? PrintingAccordion : Accordion,
  Tab: isPrinting ? PrintingTab : Tab,
};

Export Script

The scripts/export-pdf.ts script uses Puppeteer to:

1. Discover all documentation pages from source.getPages()
2. Navigate to each page with headless Chrome
3. Wait for content to load
4. Generate PDF with custom settings

await page.pdf({
  path: outputPath,
  width: "950px",
  printBackground: true,
  margin: {
    top: "20px",
    right: "20px",
    bottom: "20px",
    left: "20px",
  },
});

Configuration

PDF Settings

Edit scripts/export-pdf.ts to customize PDF output:

await page.pdf({
  path: outputPath,
  width: "950px", // Page width
  printBackground: true, // Include backgrounds
  margin: {
    // Page margins
    top: "20px",
    right: "20px",
    bottom: "20px",
    left: "20px",
  },
});

Concurrency Control

Adjust parallel exports to match your server capacity:

const CONCURRENCY = 3; // Export 3 pages at a time

Environment Variables

Set NEXT_PUBLIC_PDF_EXPORT=true to enable PDF-friendly rendering:

NEXT_PUBLIC_PDF_EXPORT=true pnpm build

Advanced Usage

Custom Page Selection

Modify getAllDocUrls() to filter pages:

async function getAllDocUrls(): Promise<string[]> {
  const pages = source.getPages();
  return pages
    .filter((page) => page.url.startsWith("/docs/api")) // Only API docs
    .map((page) => page.url);
}

Custom Viewport

Change rendering viewport for different display sizes:

await page.setViewport({
  width: 1920, // Wider viewport
  height: 1080,
});

Add Headers/Footers

Puppeteer supports custom PDF headers and footers:

await page.pdf({
  // ... other options
  displayHeaderFooter: true,
  headerTemplate: '<div style="font-size: 10px;">My Docs</div>',
  footerTemplate: '<div style="font-size: 10px;">Page <span class="pageNumber"></span></div>',
});

Troubleshooting

PDFs are blank

timeout: 60000; // 60 seconds

curl http://localhost:3000/docs

Missing Content

Navigation Still Visible

1. Clear .next cache: rm -rf .next
2. Rebuild with PDF export mode enabled
3. Verify print styles in browser dev tools

Timeout Errors

• Reduce concurrency: CONCURRENCY = 1
• Increase timeout values
• Check server resources

Best Practices

1. Always use production build for final exports
2. Test with single pages first before exporting all
3. Monitor server resources during large exports
4. Review PDFs before distribution

Scripts Reference

Tips

• Export during off-peak hours for large sites
• Use --no-sandbox flag if running in containers
• Consider PDF file size when distributing
• Test exports on different content types
• Keep Puppeteer updated for best compatibility

More Information

• Fumadocs PDF Export Guide
• Puppeteer PDF API
• Workflow Reference