Print documents

Select File > Print or press Ctrl+P. On macOS, press Cmd+P. The editor converts the current document with your PDF handler, then opens the browser print dialog. Choose the printer, pages, and copies there.

Printing calls editor.save() before conversion. Saving commits pending form input and can refresh field results with an undo step. For details, see Save a document. The PDF converter determines the printed page layout.

Before you begin

Printing uses the same PDF handler as File > Export > PDF:

1. Install @docx-editor.dev/docx-to-pdf on your Node.js server.
2. Configure menu.exporters.pdf to send the document to that server.

PDF conversion requires the EigenPal Pro License. For installation and server setup, see Export Markdown and PDF.

Enable printing

Configure menu.exporters.pdf to enable printing. No separate print handler is needed.

Use the exporters.ts module from Configure the menu in your editor:

import { DocxEditor } from '@docx-editor.dev/react';
import { exporters } from './exporters';
import '@docx-editor.dev/core/styles/editor.css';

export function Editor({ source }: { source: Uint8Array }) {
  return <DocxEditor document={source} menu={{ exporters }} />;
}

<script setup lang="ts">
import { DocxEditor } from '@docx-editor.dev/vue';
import { exporters } from './exporters';
import '@docx-editor.dev/core/styles/editor.css';

defineProps<{ source: Uint8Array }>();
</script>

<template>
  <DocxEditor :document="source" :menu="{ exporters }" />
</template>

For a composed editor, pass exporters to DocxEditor.Menu or DocxEditorMenu inside Root.

How printing works

When you select File > Print, the editor completes these steps:

1. Show the preparation dialog.
2. Save the current document and send its bytes to exporters.pdf.
3. Check the PDF header and load the PDF into a hidden frame.
4. Close the progress dialog and open the browser print dialog.

Select Cancel during preparation to stop printing. Conversion can continue, but the editor discards a result that arrives after cancellation.

The print action stays unavailable during preparation and while an error dialog remains open. The editor retains the PDF until the next print or until the menu unmounts. Removing its frame during printing can cancel the printout.

Use the keyboard shortcut

On Windows and Linux, press Ctrl+P. On macOS, press Cmd+P. The editor leaves macOS Ctrl+P available for moving the cursor to the previous line.

The shortcut prints when focus is inside the editor, including its menu bar and document. Outside the editor, the browser handles the shortcut.

Without menu.exporters.pdf, the browser handles the shortcut. File > Print then shows no shortcut, and selecting it opens a setup error.

For your own controls, use isChromePrintShortcut(event) from @docx-editor.dev/core/editor to recognize the same shortcut.

Browser requirements

Printing inside the page requires the browser's built-in PDF viewer. When navigator.pdfViewerEnabled is false, the editor shows an error with an Open PDF link. The browser can open or download that PDF. Print it from a PDF viewer.

Some browsers produce blank pages when printing a PDF from a frame. In that case, select File > Export > PDF and print the downloaded file from a PDF viewer.

Handle errors

The dialog reports these failures:

• A missing exporters.pdf handler produces package and configuration instructions.
• A conversion or PDF validation failure includes its error message.
• A PDF load that exceeds 15 seconds produces an error with Open PDF.
• A browser refusal to print from the page produces an error with Open PDF.

To retry, close the dialog and select File > Print again.

Customize the print dialog

Use popups.print to replace progress and error feedback. It accepts definePopup(), render callbacks, and false. For examples, see Customize print feedback.

Compose the print control

The shared slot is file.print. React exposes DocxEditor.Menu.Print, and Vue exposes DocxEditorMenu.Print.

When replacing the File menu, include the print part. In React, use preset={false}; in Vue, use :preset="false".

Inside DocxEditor.Root, this React arrangement keeps Print after Export:

<DocxEditor.Menu exporters={exporters}>
  <DocxEditor.Menu.File preset={false}>
    <DocxEditor.Menu.Open />
    <DocxEditor.Menu.Save />
    <DocxEditor.Menu.Submenu labelKey="toolbar.export">
      <DocxEditor.Menu.ExportMarkdown />
      <DocxEditor.Menu.ExportPdf />
    </DocxEditor.Menu.Submenu>
    <DocxEditor.Menu.Print />
    <DocxEditor.Menu.PageSetup />
  </DocxEditor.Menu.File>
</DocxEditor.Menu>

Pass hidden to the print part to remove its menu item. Menu.Item dispatches editing commands and does not print.

Build a custom print flow

Call runChromePrint(editor, exporters, container) from @docx-editor.dev/core/editor to prepare a ChromePrintJob:

The optional container receives the hidden print frame. It accepts a Document or Element and defaults to document. For an editor inside a modal dialog, pass an element inside that dialog.

This function returns the job after a browser print failure so your UI can offer an Open PDF link:

import {
  ChromePrintError,
  runChromePrint,
  type ChromeExportHandlers,
  type ChromePrintJob,
} from '@docx-editor.dev/core/editor';
import type { Editor } from '@docx-editor.dev/core';

export async function printDocument(
  editor: Editor,
  exporters: ChromeExportHandlers,
  container: Element
): Promise<ChromePrintJob> {
  const job = await runChromePrint(editor, exporters, container);
  try {
    await job.print();
  } catch (error) {
    if (!(error instanceof ChromePrintError)) {
      job.dispose();
      throw error;
    }
    // Show job.url as a link to the PDF viewer.
  }
  // Keep the job during printing. Dispose it before the next print or on unmount.
  return job;
}

A missing PDF handler makes runChromePrint reject with ChromeExportError. Conversion and PDF validation errors also reject the call.

Browser print failures use ChromePrintError with these codes:

For a modal progress dialog, use job.print({ beforePrint: closeDialog }). The callback runs after PDF loading and before printing. Wait for the dialog to unmount before the callback returns. In React, use flushSync for the closing state update. In Vue, update the state and await nextTick().

Keep the job while the user prints or opens its PDF link. Calling dispose() removes the frame and invalidates the link.

Demo behavior

The React and Vue demos include File > Print. Both use the /api/convert endpoint shared with PDF export. For local printing, run bun run build:pdf before bun run dev.