ExamplesInteroperabilityExporting documents to DOCX (Office Open XML)

Exporting documents to DOCX (Office Open XML)

This example exports the current document (all blocks) as an Microsoft Word Document (DOCX) file and downloads it to your computer.

Try it out: Edit the document and click "Download .docx" at the top to download the DOCX file.

GitHub
StackBlitz
import { testDocumentBlocks } from "./testDocumentBlocks";import {  BlockNoteSchema,  combineByGroup,  withPageBreak,} from "@blocknote/core";import { filterSuggestionItems } from "@blocknote/core/extensions";import "@blocknote/core/fonts/inter.css";import * as locales from "@blocknote/core/locales";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import {  createReactInlineMathSpec,  createReactMathBlockSpec,} from "@blocknote/math-block";import { createReactDiagramBlockSpec } from "@blocknote/diagram-block";import {  SuggestionMenuController,  getDefaultReactSlashMenuItems,  getPageBreakReactSlashMenuItems,  useCreateBlockNote,} from "@blocknote/react";import {  DOCXExporter,  docxDefaultSchemaMappings,} from "@blocknote/xl-docx-exporter";import { diagramBlockMapping } from "@blocknote/diagram-block/docx-exporter";import {  inlineMathMapping,  mathBlockMapping,} from "@blocknote/math-block/docx-exporter";import {  getMultiColumnSlashMenuItems,  multiColumnDropCursor,  locales as multiColumnLocales,  withMultiColumn,} from "@blocknote/xl-multi-column";import { useMemo } from "react";import "./styles.css";export default function App() {  // Creates a new editor instance.  const editor = useCreateBlockNote({    // Adds support for page breaks & multi-column blocks.    // Adds support for math & diagram blocks.    schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())).extend({      blockSpecs: {        mathBlock: createReactMathBlockSpec(),        diagram: createReactDiagramBlockSpec(),      },      inlineContentSpecs: {        math: createReactInlineMathSpec(),      },    }),    dropCursor: multiColumnDropCursor,    dictionary: {      ...locales.en,      multi_column: multiColumnLocales.en,    },    // Adds support for advanced table features.    tables: {      splitCells: true,      cellBackgroundColor: true,      cellTextColor: true,      headers: true,    },    // Sets initial editor content.    initialContent: [      ...testDocumentBlocks,      // The math & diagram blocks aren't part of the shared test document,      // since the exporter unit tests' schemas don't register them, so they're      // appended here instead.      {        type: "mathBlock",        content: "a^2 = \\sqrt{b^2 + c^2}",      },      {        type: "diagram",        content: `graph TD  A[Start] --> B{Works?}  B -->|Yes| C[Ship it]  B -->|No| A`,      },      {        type: "paragraph",        content: [          {            type: "text",            text: "Inline math: ",            styles: {},          },          {            type: "math",            content: "e^{i\\pi} + 1 = 0",          },        ],      },    ],  });  // Additional Slash Menu items for page breaks and multi-column blocks.  const getSlashMenuItems = useMemo(() => {    return async (query: string) =>      filterSuggestionItems(        combineByGroup(          getDefaultReactSlashMenuItems(editor),          getPageBreakReactSlashMenuItems(editor),          getMultiColumnSlashMenuItems(editor),        ),        query,      );  }, [editor]);  // Exports the editor content to DOCX and downloads it.  const onDownloadClick = async () => {    const exporter = new DOCXExporter(editor.schema, {      ...docxDefaultSchemaMappings,      blockMapping: {        ...docxDefaultSchemaMappings.blockMapping,        // Embeds diagrams as images instead of their Mermaid source.        diagram: diagramBlockMapping,        // Renders math blocks as native equations instead of their LaTeX        // source.        mathBlock: mathBlockMapping,      },      inlineContentMapping: {        ...docxDefaultSchemaMappings.inlineContentMapping,        // Renders inline math as native equations instead of its LaTeX        // source.        math: inlineMathMapping,      },    });    const blob = await exporter.toBlob(editor.document);    const link = document.createElement("a");    link.href = window.URL.createObjectURL(blob);    link.download = "My Document (blocknote export).docx";    document.body.appendChild(link);    link.dispatchEvent(      new MouseEvent("click", {        bubbles: true,        cancelable: true,        view: window,      }),    );    link.remove();    window.URL.revokeObjectURL(link.href);  };  // Renders the editor instance.  return (    <div className="views">      <div className="view-wrapper">        <div className="view-label">          Editor          <span className="view-label-download" onClick={onDownloadClick}>            Download DOCX          </span>        </div>        <div className="view">          <BlockNoteView editor={editor} slashMenu={false}>            <SuggestionMenuController              triggerCharacter={"/"}              getItems={getSlashMenuItems}            />          </BlockNoteView>        </div>      </div>    </div>  );}

Exporting documents to PDF (react-pdf, deprecated)

Previous Page

Exporting documents to ODT (Open Document Text)

Next Page