导出 Snapshot

导出图片

使用方式

第一步: 注册插件

import LogicFlow from '@logicflow/core';
import { Snapshot } from '@logicflow/extension';

LogicFlow.use(Snapshot);

第二步: 通过第一步，将插件注册到LogicFlow上，使LogicFlow实例上多了一个实例方法 lf.getSnapshot

const lf = new LogicFlow({
  container: document.querySelector('#graph'),
  width: 700,
  height: 600,
});
// 可以使用任意方式触发，然后将绘制的图形下载到本地磁盘上
document.getElementById('download').addEventListener('click', () => {
  lf.getSnapshot()
  // 或者 1.1.13版本
  // lf.extension.snapshot.getSnapshot()
})

值得一提的是：通过此插件截取下载的图片不会因为偏移、缩放受到影响。

导出xml

1.0.7 新增

LogicFlow默认生成的数据是json格式，可能会有一些流程引擎需要前端提供xml格式数据。@logicflow/extension提供了lfJson2Xml和lfXml2Json两个插件，用于将json和xml进行互相转换。

import LogicFlow from '@logicflow/core';
import { lfJson2Xml, lfXml2Json} from '@logicflow/extension';

const lf = new LogicFlow({
  // ...
})
const data = lfJson2Xml(jsonData)
lf.render(data);
const xml = lfJson2Xml(lf.getGraphData())

自定义下载css

为了保持流程图生成的图片与画布上效果一致，snapshot插件默认会将当前页面所有的css规则都加载克隆到canvas中, 但是可能会因为CSS文件跨域引起报错，参考issue575 (opens new window)。可以修改useGlobalRules来禁止加载所有css规则，然后通过customCssRules来自定义下载流程图属性。

  lf.extension.snapshot.useGlobalRules = false
  lf.extension.snapshot.customCssRules = `
    .lf-node-text-auto-wrap-content{
      line-height: 1.2;
      background: transparent;
      text-align: center;
      word-break: break-all;
      width: 100%;
    }
    .lf-canvas-overlay {
      background: red;
    }
  `

示例