Export Markdown and PDF

Connect conversion handlers to File > Export for Markdown and PDF downloads. Each export uses saved DOCX bytes without changing the document or undo history.

Try document export

The example converts the edited document to Markdown in the browser. Its PDF example shows server integration code.

Install the converters

Install the converter for each format your application enables. Editor packages do not include converters. Opening the editor or menu does not load them.

For Markdown export, install the converter in your browser application:

npm install @docx-editor.dev/docx-to-markdown @docx-editor.dev/core

For PDF export, install the converter on your Node.js server:

npm install @docx-editor.dev/docx-to-pdf @docx-editor.dev/core

PDF conversion requires the EigenPal Pro License. The PDF package does not run in browsers. Keep its import in server code.

Configure the menu

Pass conversion handlers through menu.exporters on the packaged editor. For a composed editor, pass exporters to DocxEditor.Menu or DocxEditorMenu.

The menu downloads result.markdown as continuous text without page separators, page headers, or page footers. It does not join result.pages.

Create exporters.ts with browser Markdown conversion and a PDF endpoint:

import type { ChromeExportHandlers } from '@docx-editor.dev/core/editor';
export const exporters: ChromeExportHandlers = {
  async markdown(source) {
    const { exportMarkdown } = await import('@docx-editor.dev/docx-to-markdown');
    return exportMarkdown(source, { displayMode: 'proposed' });
  },
  pdf: async (source) => {
    const response = await fetch('/api/export/pdf', {
      method: 'POST',
      headers: { 'Content-Type': 'application/octet-stream' },
      body: source.slice().buffer,
    });
    const contentType = response.headers.get('Content-Type') ?? '';
    if (!response.ok || !contentType.includes('application/pdf')) {
      throw new Error(
        'PDF export is unavailable. Configure a Node.js server with ' +
          '@docx-editor.dev/docx-to-pdf.'
      );
    }
    return { bytes: new Uint8Array(await response.arrayBuffer()) };
  },
};

Pass the handlers to the React 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 }} />;
}

Use the same handlers in Vue:

<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>

While conversion runs, a dialog shows the export format. Select Continue editing to dismiss the dialog without stopping the export. Export actions remain disabled until conversion finishes. The dialog closes when the download starts.

The editor checks the PDF header before downloading. If conversion fails or returns another file type, the dialog shows an error. Close the dialog, then select the format again to retry.

If a converter handler is missing, the error names the required package and configuration. A missing converter never falls back to another format.

Use popups.export to replace progress and error feedback. See Customize export feedback.

Convert PDF on the server

Your PDF endpoint calls exportPdf and returns result.bytes with the application/pdf content type. This Fetch API handler runs on Node.js:

import { exportPdf } from '@docx-editor.dev/docx-to-pdf';

export async function POST(request: Request): Promise<Response> {
  const source = new Uint8Array(await request.arrayBuffer());
  const result = await exportPdf(source, {
    displayMode: 'proposed',
    fidelityPolicy: 'strict',
    useSystemFonts: false,
  });
  return new Response(result.bytes.slice().buffer, {
    headers: {
      'Content-Type': 'application/pdf',
      'Cache-Control': 'no-store',
    },
  });
}

Configure authentication, upload limits, and conversion error responses for your application. For complete server examples, see Integrate PDF conversion.

Compose export controls

The shared slots are file.exportMarkdown and file.exportPdf. React and Vue expose DocxEditor.Menu.ExportMarkdown and DocxEditor.Menu.ExportPdf.

Slot overrides also apply inside the Export submenu. Use className to style a row or hidden to remove it.

Inside DocxEditor.Root, hide PDF export while you configure its server:

<DocxEditor.Menu exporters={exporters}>
  <DocxEditor.Menu.File>
    <DocxEditor.Menu.ExportPdf hidden />
  </DocxEditor.Menu.File>
</DocxEditor.Menu>

For Vue, use DocxEditorMenu with the same File and ExportPdf parts.

Use the named export parts to connect menu handlers. Menu.Item dispatches editing commands and does not call converters.

If you replace the File menu with preset={false}, include these parts inside DocxEditor.Menu.Submenu. In Vue, use :preset="false". Set the submenu's labelKey to toolbar.export. Export controls use menu handlers rather than document editing commands.

For a custom download interface, call runChromeExport(editor, format, exporters) from @docx-editor.dev/core/editor. It returns bytes, a filename extension, and a media type. It rejects missing handlers with ChromeExportError, whose code is missing-exporter.

Demo behavior

The React and Vue example applications enable both formats with displayMode: 'proposed'. Exports include tracked insertions and omit tracked deletions.

Their frontend packages install Markdown for browser conversion. Their shared server installs PDF. Selecting PDF sends the document to the same-origin /api/convert endpoint. The server returns the PDF without retaining the input or output.

For local PDF export, run bun run build:pdf before bun run dev. The development server uses the same conversion handler as the deployed demo.

File > Print uses the same PDF handler. For more information, see Print documents.

For conversion options and limits, see DOCX to Markdown and DOCX to PDF. For DOCX downloads, see Loading and saving.