Export
Previous
Stencil
Next
Upgrade to 3.x
Loading...
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())
exportSVG(fileName?: string, options?: Export.ToSVGOptions): void
fileName is the name of the file, defaulting to chart. Export.ToSVGOptions is described as follows:
| Property Name | Type | Default Value | Required | 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. |
exportPNG(fileName?: string, options?: Export.ToImageOptions): void
fileName is the name of the file, defaulting to chart. Export.ToImageOptions inherits from the above Export.ToSVGOptions and has the following additional configurations:
| Property Name | Type | Default Value | Required | 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 | - | Background color of the exported image, defaults to white. | |
| padding | NumberExt.SideOptions | - | Padding for the image. | |
| quality | number | - | Image quality (0–1). If out of range, the default value 0.92 is used. |
exportJPEG(fileName?: string, options?: Export.ToImageOptions): void
toSVG(callback: (dataUri: string) => any, options?: Export.ToSVGOptions): void
toPNG(callback: (dataUri: string) => any, options?: Export.ToImageOptions): void
toJPEG(callback: (dataUri: string) => any, options?: Export.ToImageOptions): void