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

> Learn to export Tiptap editor content to PDF with custom styling in ReactJS. This guide shows how to use the Export PDF extension for styled, printable PDFs.

- Repository: [Hung Hoang/reactjs-tiptap-editor](https://github.com/hunghg255/reactjs-tiptap-editor)
- Tags: how-to-guide
- Published: 2026-03-03

---

**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`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/src/utils/pdf.ts) and [`src/extensions/ExportPdf/ExportPdf.ts`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/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`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/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`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/src/extensions/ExportPdf/ExportPdf.ts)**: Registers the `exportToPdf` command and defines default configuration options for paper size and margins.
- **[`src/utils/pdf.ts`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/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`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/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`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/ExportPdf/index.md)**: Documents the public API and configuration interface.

## Configuring Paper Size and Margins

The `printHtml` function in [`pdf.ts`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/pdf.ts) constructs a `<style>` block that respects your configuration:

```html
<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:

```tsx
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`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/docs/extensions/ExportPdf/index.md).

### Programmatic Export

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

```tsx
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`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/src/utils/pdf.ts).

### Customizing Page Layout

Configure global defaults before rendering the editor:

```tsx
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`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/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`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/ExportPdf.ts) triggers the `printEditorContent` utility in [`pdf.ts`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/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`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/src/utils/pdf.ts) to reference a local copy of [`style.css`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/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`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/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.