Export

This chapter mainly introduces the knowledge of the export plugin. By reading, you can learn about

How to export the canvas content in image format

Usage

You can export the canvas content as images via the Export plugin. Example:

import { Graph, Export } from '@antv/x6'

const graph = new Graph({
  background: {
    color: '#F2F7FA',
  },
})

graph.use(new Export())

API

graph.exportSVG(…)

exportSVG(fileName?: string, options?: ExportToSVGOptions): void

fileName is the name of the file, defaulting to chart. ExportToSVGOptions is described as follows:

Property Name	Type	Default Value	Description
preserveDimensions	`boolean \| Size`	-	Controls the exported SVG size. When unset, width/height are `100%`; when `true`, they are auto-calculated to the actual content size; you can also pass `{ width, height }` to explicitly set the export size.
viewBox	`RectangleLike`	-	Sets the viewBox of the exported SVG.
copyStyles	`boolean`	`true`	Whether to copy styles from external stylesheets. When enabled, computed style differences of nodes are inlined into the exported SVG to keep visuals consistent with the page; this adds export time. If you prefer speed or styles are set via `attrs`, set to `false` and pair with `stylesheet` to inject necessary CSS.
stylesheet	`string`	-	Custom stylesheet.
serializeImages	`boolean`	`true`	Whether to convert the `xlink:href`/`href` of image elements to DataURI (forced for PNG/JPEG).
beforeSerialize	`(this: Graph, svg: SVGSVGElement) => any`	-	You can call `beforeSerialize` to modify the SVG string before exporting it.

graph.exportPNG(…)

exportPNG(fileName?: string, options?: ExportToImageOptions): void

fileName is the name of the file, defaulting to chart. ExportToImageOptions inherits from the above ExportToSVGOptions and has the following additional configurations:

Property Name	Type	Default Value	Description
width	`number`	-	Width of the exported image.
height	`number`	-	Height of the exported image.
ratio	`number`	`1`	Scale factor (e.g., device pixel ratio) used to compute export resolution.
backgroundColor	`string`	`'white'`	Background color of the exported image.
padding	`NumberExt.SideOptions`	-	Padding for the image.
quality	`number`	-	Image quality (0–1). If out of range, the default value `0.92` is used.

graph.exportJPEG(…)

exportJPEG(fileName?: string, options?: ExportToImageOptions): void

graph.toSVG(…)

toSVG(callback: ExportToSVGCallback, options?: ExportToSVGOptions): void

graph.toPNG(…)

toPNG(callback: ExportToSVGCallback, options?: ExportToImageOptions): void

graph.toJPEG(…)

toJPEG(callback: ExportToSVGCallback, options?: ExportToImageOptions): void

graph.toSVGAsync(…)

toSVGAsync(options?: ExportToSVGOptions): Promise<string>

graph.toPNGAsync(…)

toPNGAsync(options?: ExportToImageOptions): Promise<string>

graph.toJPEGAsync(…)

toJPEGAsync(options?: ExportToImageOptions): Promise<string>