导出
本章节主要介绍导出插件相关的知识，通过阅读，你可以了解到
- 如何将画布内容通过图片格式导出
使用
你可以通过插件 Export 将画布内容导出为图片格式，示例：
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): voidfileName 为文件名称，缺省为 chart，ExportToSVGOptions 描述如下：
| 属性名 | 类型 | 默认值 | 必选 | 描述 |
|---|---|---|---|---|
| preserveDimensions | boolean | Size |
- | 控制导出 SVG 的尺寸；未设置时 width/height 为 100%；设置为 true 时自动计算为图形区域的实际大小；也可传入 { width, height } 显式指定导出尺寸。 |
|
| viewBox | RectangleLike |
- | 设置导出 SVG 的 viewBox | |
| copyStyles | boolean |
true |
是否复制外部样式表中的样式，默认 true。开启后会将节点的计算样式按差异内联到导出的 SVG，以保持页面与导出视觉一致，但会增加导出耗时；若样式已通过 attrs 指定或追求速度，可设为 false，并结合 stylesheet 注入必要 CSS。 |
|
| stylesheet | string |
- | 自定义样式表 | |
| serializeImages | boolean |
true |
是否将 image 元素的 xlink:href/href 链接转化为 DataURI（导出 PNG/JPEG 时会强制启用）。 |
|
| beforeSerialize | (this: Graph, svg: SVGSVGElement) => any |
- | 可以在导出 svg 字符串之前调用 beforeSerialize 来修改它 |
graph.exportPNG(…)
exportPNG(fileName?: string, options?: ExportToImageOptions): voidfileName 为文件名称，缺省为 chart，ExportToImageOptions 除了继承上面 ExportToSVGOptions 外，还有以下配置：
| 属性名 | 类型 | 默认值 | 必选 | 描述 |
|---|---|---|---|---|
| width | number |
- | 导出图片的宽度 | |
| height | number |
- | 导出图片的高度 | |
| ratio | number |
1 |
输出缩放比例（如设备像素比），用于计算导出分辨率。 | |
| backgroundColor | string |
'white' |
导出图片的背景色。 | |
| padding | NumberExt.SideOptions |
- | 图片的 padding | |
| quality | number |
- | 图片质量，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92 |
graph.exportJPEG(…)
exportJPEG(fileName?: string, options?: ExportToImageOptions): voidgraph.toSVG(…)
toSVG(callback: ExportToSVGCallback, options?: ExportToSVGOptions): voidgraph.toPNG(…)
toPNG(callback: ExportToSVGCallback, options?: ExportToImageOptions): voidgraph.toJPEG(…)
toJPEG(callback: ExportToSVGCallback, options?: ExportToImageOptions): voidgraph.toSVGAsync(…)
toSVGAsync(options?: ExportToSVGOptions): Promise<string>graph.toPNGAsync(…)
toPNGAsync(options?: ExportToImageOptions): Promise<string>graph.toJPEGAsync(…)
toJPEGAsync(options?: ExportToImageOptions): Promise<string>