Export Image

This feature allows you to export the current document as an image format. The image export feature depends on Umo Editor Server, and you need to ensure that Umo Editor Server is started.

The export effect is completely consistent with the display effect when editing the document, including the display of various nodes and page layout, etc. You can also customize CSS styles and JS scripts when exporting, and also configure other export image configurations.

Using Umo Editor Server to export images can avoid the performance issues that may occur when generating images on the client side, and effectively prevents cross-origin errors that could arise from referencing third-party resources.

Export Effect

Default Configuration

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

Unsupported Methods

• getImage

Description：getImage has been deprecated in Umo Editor Next, please use exportImage instead, see the method list below.

Configuration Description

export

• export.styleURL

Description：When exporting a document, the URL of the style file, the style file defines the styles used when exporting the document, usually after running npm run build, the style is dist/style.css, you can place the style file in other locations, then configure this item to the correct URL path.

Note：This item must be configured, otherwise it cannot be exported. And styleURL cannot be a relative path or absolute path, must be a complete URL, otherwise it may cause the style to fail to load in other places, resulting in the document not being displayed correctly.

Type：String

Default Value：''

Example：

export: {
  styleURL: `${window.location.origin}/css/umo-editor-next.css`,
}

• export.serverURL

Description：When exporting an image, the URL of Umo Editor Server, Umo Editor Server provides an API for exporting images, you need to ensure that Umo Editor Server is started.

Type：String

Default Value：''

Example：

export: {
  serverURL: 'http://127.0.0.1:1235',
}

Method List

exportImage

Description：Export image format document.

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

• htmlOptions：Object，Generate HTML parameters, optional, see exportHTML。
• exportType：String，The image format to export, optional values are jpeg、png、webp。
• imageOptions：Object，Export image configuration items, optional, containing the following configuration items:
  • imageOptions.quality：Number，Image quality, the value range is 0 to 100, Not applicable to png format.
• download：Boolean，Whether to download, default value is false。
• filename：String，Download file name, without file extension, default uses document name.

Return Value：Blob | undefined，When download is false, returns Blob, when download is true, returns undefined.