How to Export Editor Content to PDF with Proper Styling in ReactJS Tiptap Editor

The Export PDF extension provides a built-in command and toolbar button that prints the editor's HTML content as a styled PDF by injecting it into a hidden iframe with @media print rules.

The reactjs-tiptap-editor library includes a dedicated ExportPdf extension that enables PDF generation directly from the Tiptap editor. This feature preserves your custom styling—including typography, colors, and layout—by leveraging browser print APIs and targeted CSS rules. Understanding how to export editor content to PDF with proper styling ensures your exported documents match your application’s design system.

How the Export PDF Extension Works

The export mechanism relies on four core steps implemented in src/utils/pdf.ts and src/extensions/ExportPdf/ExportPdf.ts:

1. HTML Collection: The extension retrieves the editor’s current content via editor.getHTML().
2. Iframe Injection: It creates a hidden iframe and writes a complete HTML document containing the editor markup.
3. Stylesheet Loading: The iframe loads the library’s CSS (reactjs-tiptap-editor/style.css) and applies a @media print block with @page rules for paper sizing.
4. Print Trigger: It calls window.print() on the iframe, opening the browser’s PDF dialog while preserving all visual formatting.

Core Implementation Files

Understanding the source structure helps you customize the export behavior:

• src/extensions/ExportPdf/ExportPdf.ts: Registers the exportToPdf command and defines default configuration options for paper size and margins.
• src/utils/pdf.ts: Contains the printEditorContent function that generates the iframe, constructs the HTML document, and injects the print-specific stylesheet.
• src/extensions/ExportPdf/components/RichTextExportPdf.tsx: Renders the toolbar button using the ActionButton component, wiring it to the export command.
• docs/extensions/ExportPdf/index.md: Documents the public API and configuration interface.

Configuring Paper Size and Margins

The printHtml function in pdf.ts constructs a <style> block that respects your configuration:

<style>
  @media print {
    @page {
      size: ${paperSize};
      margin: ${marginTop} ${marginRight} ${marginBottom} ${marginLeft};
    }
    body { background: none; margin: 0; padding: 0; }
    .print-container { width: 100%; box-sizing: border-box; }
    .no-print { display: none; }
  }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reactjs-tiptap-editor@latest/lib/style.css">

The @page rule sets the target paper format (e.g., A4, Letter) and four-side margins. Elements with the no-print class are automatically hidden from the PDF output, allowing you to exclude UI-only nodes.

Implementation Examples

Adding the Toolbar Button

Import the extension and its UI component to enable one-click exports:

import { RichTextProvider } from 'reactjs-tiptap-editor';
import { Document, Text, Paragraph } from '@tiptap/*';
import { ExportPdf, RichTextExportPdf } from 'reactjs-tiptap-editor/exportpdf';
import 'reactjs-tiptap-editor/style.css';

const extensions = [
  Document,
  Text,
  Paragraph,
  ExportPdf, // Register the exporter
];

export const App = () => {
  const editor = useEditor({ extensions });

  return (
    <RichTextProvider editor={editor}>
      <RichTextExportPdf /> {/* Toolbar button */}
      <EditorContent editor={editor} />
    </RichTextProvider>
  );
};

This setup mirrors the official documentation in docs/extensions/ExportPdf/index.md.

Programmatic Export

Trigger PDF generation from custom menus or keyboard shortcuts using the editor command:

import { useEditor } from '@tiptap/react';
import { ExportPdf } from 'reactjs-tiptap-editor/exportpdf';

const CustomMenu = () => {
  const editor = useEditor();

  const handleExport = () => {
    // Invokes the command defined in ExportPdf.ts (lines 55-62)
    editor?.commands.exportToPdf();
  };

  return <button onClick={handleExport}>Download PDF</button>;
};

The exportToPdf command ultimately invokes printEditorContent from src/utils/pdf.ts.

Customizing Page Layout

Configure global defaults before rendering the editor:

import { ExportPdf } from 'reactjs-tiptap-editor/exportpdf';

ExportPdf.configure({
  paperSize: 'A4',
  margins: {
    top: '1in',
    right: '0.5in',
    bottom: '1in',
    left: '0.5in',
  },
});

These values are read inside printHtml (lines 14-19 of pdf.ts) and injected into the @page CSS rule.

Advanced Styling Considerations

To ensure your PDF matches your live editor:

• Load Custom CSS: The iframe automatically loads the library stylesheet from the CDN. For custom themes, ensure your CSS is included in the editor container or modify the printHtml function to inject additional <link> tags.
• Hide Interactive Elements: Add the no-print class to toolbar buttons, comments, or edit controls that should not appear in the final document.
• Background Colors: The print stylesheet sets background: none on the body. Override this in your @media print rules if you need preserved background colors.

Summary

• The ExportPdf extension in reactjs-tiptap-editor uses an iframe-based approach to generate PDFs while preserving CSS styling.
• Configuration options in ExportPdf.configure() control paper size (A4, Letter, etc.) and margin measurements.
• The exportToPdf command defined in ExportPdf.ts triggers the printEditorContent utility in pdf.ts, which handles HTML assembly and stylesheet injection.
• Use the no-print CSS class to exclude UI elements from the exported PDF.
• The <RichTextExportPdf /> component provides a ready-to-use toolbar button connected to the export command.

Frequently Asked Questions

Does the PDF export work offline?

The export relies on the browser’s built-in window.print() functionality, which works offline. However, the default implementation loads the stylesheet from a CDN (cdn.jsdelivr.net). To ensure offline capability, modify src/utils/pdf.ts to reference a local copy of style.css instead of the remote URL.

How do I add page breaks in the exported PDF?

Insert the CSS property page-break-after: always or break-after: page on block-level elements within your editor content. The iframe-based print mechanism respects standard CSS pagination rules, allowing you to control where pages split in the final document.

Can I export only a specific portion of the editor content?

Currently, the exportToPdf command calls editor.getHTML(), which retrieves the entire document. To export specific nodes, create a custom command that filters the JSON representation (editor.getJSON()) or specific HTML elements before passing the markup to a modified version of the printEditorContent function in pdf.ts.

Why are my custom fonts not appearing in the PDF?

Custom fonts must be explicitly loaded within the print iframe. The default stylesheet includes the core editor fonts, but custom webfonts require additional <link> or @font-face declarations in the HTML generated by printHtml. Ensure your font URLs are absolute or data URIs to prevent cross-origin issues during printing.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}