Skip to content
Tiptap Editor Tools

Page Print

The page print feature allows you to print your paginated content using the browser’s native print functionality. This feature is available in the demo editor and provides a simple way to print your content with proper page breaks.

Overview

Section titled “Overview”

The page print feature uses the browser’s built-in print capabilities to render your paginated content. It’s designed to work with the pagination extension to provide a clean print output.

How to Use

Section titled “How to Use”

In the Demo Editor

Section titled “In the Demo Editor”
  1. Open the Tiptap Pagination Demo
  2. Create or load your content with pagination
  3. Click the Print button in the editor toolbar
  4. The browser’s print dialog will open
  5. Configure your print settings and print

Programmatic Usage

Section titled “Programmatic Usage”
// Get the editor instance
const editor = new Editor({
  extensions: [
    StarterKit,
    PaginationPlus.configure({
      // your pagination configuration
    }),
  ],
})


// Print the content
function printContent() {
  window.print()
}

Features

Section titled “Features”
  • Simple Browser Print: Uses the browser’s native print functionality
  • Page Breaks: Content automatically breaks at page boundaries
  • Print Preview: See how your content will look before printing
  • Print Settings: Configure margins, orientation, and other print options through browser settings

Limitations

Section titled “Limitations”

:::warning Important Limitations The page print feature has several limitations that you should be aware of: :::

Not Supported Features

Section titled “Not Supported Features”
  • Header/Footer Support: Custom headers and footers configured in the pagination extension are not included in the print output
  • Page Count Display: The {page} variable and page numbering from the pagination extension won’t appear in the printed document
  • Page Size Matching: The printed page size may not exactly match the configured page height and width from the pagination extension
  • Page Width/Height: The actual printed dimensions will depend on your browser’s print settings and printer configuration

Browser Dependencies

Section titled “Browser Dependencies”
  • Print Quality: The print quality depends on your browser’s print engine and printer settings
  • Page Margins: Browser print margins may override the pagination extension’s margin settings
  • Font Rendering: Fonts may render differently in print than on screen
Section titled “Print Configuration”

Browser Print Settings

Section titled “Browser Print Settings”

When printing, you can configure:

  • Page Size: A4, Letter, Legal, etc.
  • Orientation: Portrait or Landscape
  • Margins: Top, bottom, left, right margins
  • Scale: Zoom level for the printed content
  • Background Graphics: Whether to include background colors and images
Section titled “Recommended Settings”

For best results when printing paginated content:

  1. Page Size: Use A4 or Letter depending on your region
  2. Margins: Set to “Minimum” or “None” to maximize content area
  3. Scale: Use 100% to maintain proper proportions
  4. Background Graphics: Enable if you want to preserve styling

Example

Section titled “Example”

Here’s a complete example of how to implement print functionality:

<!DOCTYPE html>
<html>
<head>
  <title>Pagination Print Example</title>
  <style>
    @media print {
      .page-break {
        page-break-before: always;
      }
      .no-print {
        display: none;
      }
    }
  </style>
</head>
<body>
  <div id="editor"></div>
  <button onclick="window.print()" class="no-print">
    Print Content
  </button>


  <script>
    const editor = new Editor({
      element: document.querySelector('#editor'),
      extensions: [
        StarterKit,
        PaginationPlus.configure({
          pageHeight: 800,
          pageGap: 50,
          // other configuration options
        }),
      ],
    })
  </script>
</body>
</html>

CSS Print Styles

Section titled “CSS Print Styles”

You can customize the print appearance using CSS print media queries:

@media print {
  /* Hide non-printable elements */
  .no-print {
    display: none !important;
  }


  /* Ensure page breaks work properly */
  .page-break {
    page-break-before: always;
  }


  /* Adjust margins for print */
  body {
    margin: 0;
    padding: 20px;
  }


  /* Style the content for print */
  .ProseMirror {
    font-size: 12pt;
    line-height: 1.4;
  }
}

Troubleshooting

Section titled “Troubleshooting”

Common Issues

Section titled “Common Issues”

Content doesn’t break properly across pages:

  • Ensure your pagination extension is properly configured
  • Check that page height settings are appropriate for your content
  • Verify that tables are using the required table extensions

Print quality is poor:

  • Check your browser’s print settings
  • Ensure you’re using a high-resolution printer
  • Try adjusting the scale setting in the print dialog

Headers and footers are missing:

  • This is expected behavior - the print feature doesn’t support custom headers/footers
  • Use browser print settings to add page numbers if needed

Page size doesn’t match:

  • The printed page size depends on your browser and printer settings
  • Configure the page size in the browser’s print dialog to match your needs

Browser Compatibility

Section titled “Browser Compatibility”

The page print feature works with all modern browsers that support the window.print() method:

  • ✅ Chrome 1+
  • ✅ Firefox 1+
  • ✅ Safari 1+
  • ✅ Edge 12+
  • ✅ Internet Explorer 4+

Best Practices

Section titled “Best Practices”
  1. Test Before Printing: Always use print preview to check the output
  2. Configure Browser Settings: Set up your preferred print settings in the browser
  3. Use Appropriate Page Sizes: Choose page sizes that match your content and printer
  4. Consider Content Length: For very long documents, consider breaking them into sections
  5. Optimize for Print: Use print-friendly fonts and colors
Section titled “Related Documentation”