🎉 Umo Editor Next has been released with enhanced support for online collaboration, document annotation, version history management, AI creation, import/export and more features. Learn more →
DocumentionUmo Editor NextExport

Document Export

This feature allows you to export content from Umo Editor as Word, PDF, HTML, image files, and more, while preserving the original formatting. We are actively improving this feature, especially the Word export functionality.

Example Configuration

const defaultOptions = {
  // Document export related configuration
  export: {
    styleURL: '',
  },
}

Configuration Details

export.styleURL

Description:

The URL of the stylesheet used when exporting documents. This file defines the styles for exported documents. Typically, after running npm run build, the stylesheet is located at dist/style.css. You can move the stylesheet elsewhere and set this option to the correct URL.

Note:

This option is required for export to work properly. styleURL must be a fully accessible URL, not a relative or absolute path. Otherwise, styles may not load correctly and exported documents may not display as intended.

Type: String

Default: ''

Example: ${window.location.origin}/umo-editor-next/style.css

Methods

exportDocument

Description: This feature allows you to export document content from Umo Editor as a Umo Editor document.

Parameters: download, Boolean, whether to download the file. Default is true.

Return Value: Blob | undefined. Returns a Blob if download is false, otherwise returns undefined.

exportDocx

Description:

Export the content of Umo Editor as a Word document. Most node types and page configurations are supported, and we are continuously improving this feature.

The exported file is in docx format, which can be opened and edited in Microsoft Word and similar software.

Parameters: { content, download, filename, docxOption }

  • content: Valid [Tiptap document JSON format]. Defaults to all content in the editor, or you can specify a subset.
  • download: Boolean, whether to download the file. Default is true.
  • filename: String, the name of the downloaded file (without extension). Defaults to the document name.
  • docxOption: Options for document generation (optional), including:
    • id: String Unique identifier for the current image.
    • src: String Image loading path.
    • nodeType: String Type of image to retrieve, image for images, echarts for charts.
    • node: Tiptap document JSON format Tiptap node.
    • docxOption.page.backColor: String, Document background color, e.g. #FFFFFF.
    • docxOption.page.orientation: String, Page orientation, landscape for horizontal, portrait for vertical.
    • docxOption.page.size.height: Number, Page height in centimeters (cm).
    • docxOption.page.size.width: Number, Page width in centimeters (cm).

Return Value: Blob | undefined. Returns a Blob if download is false, otherwise returns undefined.

exportPDF

Description:

Export the current document as a PDF for easy viewing or editing elsewhere.

PDF export requires Umo Editor Server to be running.

The exported PDF looks exactly like the document in the editor, including all nodes and page layout. You can also customize CSS and JS, and configure other PDF export options such as page range.

In some scenarios, you can use PDF for document preview or display elsewhere. You can save the PDF on the server and access it via URL when needed.

Parameters: { htmlOptions, pdfOptions, filename, download }

  • htmlOptions: Object, parameters for generating HTML (optional), see exportHTML.
  • pdfOptions: Object, PDF export options (optional), including:
    • pdfOptions.timeout: Number, timeout in milliseconds. 0 means no timeout.
  • download: Boolean, whether to download the file. Default is false.
  • filename: String, the name of the downloaded file (without extension). Defaults to the document name.

Return Value: Blob | undefined. Returns a Blob if download is false, otherwise returns undefined.

Export Example:

exportHTML

Description:

Export the document as HTML for use elsewhere, or directly as an HTML file.

The exported file is standalone, so you can open it in a browser or embed it in another HTML page. The styles match those in the editor.

You can also inject custom CSS and JS when exporting HTML.

Parameters: { externalCSS, injectCSS, externalJS, injectJS, withWrapper, showBreakMarks, download, filename }

  • externalCSS: Array, URLs of external CSS files (must be fully accessible). Default: [].
  • injectCSS: Array, inline CSS styles. Default: [].
  • externalJS: Array, URLs of external JS files (must be fully accessible). Default: [].
  • injectJS: Array, inline JS scripts. Default: [].
  • withWrapper: Boolean, include outer container (background, etc). Default: true.
  • showBreakMarks: Boolean, show break marks. Default: true.
  • download: Boolean, whether to download the file. Default: false.
  • filename: String, the name of the downloaded file (without extension). Defaults to the document name.

Return Value: string | undefined. Returns the exported HTML string if download is false, otherwise returns undefined.

Export Example:

exportImage

Description:

Export the current document as an image. This feature requires Umo Editor Server to be running.

The exported image looks exactly like the document in the editor, including all nodes and page layout. You can also customize CSS and JS, and configure other image export options.

Using the server for image export avoids client-side performance issues and cross-origin errors from third-party resources.

Parameters: { htmlOptions, exportType, imageOptions, filename, download }

  • htmlOptions: Object, parameters for generating HTML (optional), see exportHTML.
  • exportType: String, image format to export (jpeg, png, webp).
  • imageOptions: Object, image export options (optional), including:
    • imageOptions.quality: Number, image quality (0-100, 0 = lowest, 100 = highest, not applicable to png).
  • download: Boolean, whether to download the file. Default: false.
  • filename: String, the name of the downloaded file (without extension). Defaults to the document name.

Return Value: Blob | undefined. Returns a Blob if download is false, otherwise returns undefined.

Export Example:

Export Example

About Fonts

When exporting images, if some fonts do not display correctly, please check whether the required fonts are installed on the server. If not, the system will automatically substitute similar fonts. To ensure correct document display, make sure all configured fonts are installed on the server.

ImportInsert Icons