mxgraph图形如何保存到本地以及从本地导入

Question

1.mxgraph绘制好的图形保存到本地
2.保存的文件可以进行解析，恢复为mxgraph绘制的图形而且可以继续绘制
3.保存文件可为xml、png不限

Answer 1

1.利用mxCodec模块进行编码生成xml文件可以保存到本地。
2.xml通过mxCodec解码可恢复graph（照理来说），但是我失败了，最后，按照循环方式获取xml节点，重新插入graph中解决。
以下代码为angular（部分代码）：
exportGraph() {
const graph: mxgraph.mxGraph = this.editor['graph'];

const enc: mxgraph.mxCodec = new mx.mxCodec();
const node = enc.encode(graph.getModel());
const xml = mx.mxUtils.getPrettyXml(node);
mx.mxUtils.popup(mx.mxUtils.getPrettyXml(node), true);
// confirm(xml);

const downLink = document.createElement('a');
downLink.download = 'graph.xml';
// 字符内容转换为blod地址
const blob = new Blob([xml]);
downLink.href = URL.createObjectURL(blob);
// 链接插入到页面
document.body.appendChild(downLink);
downLink.click();
// 移除下载链接
document.body.removeChild(downLink);
}

importGraph(e) {
const graph: mxgraph.mxGraph = this.editor['graph'];
const file = e.srcElement.files[0];
const path = window.URL.createObjectURL(file);

const cells = mx.mxUtils.load(path).getDocumentElement().getElementsByTagName('mxCell') as Array;
const parent = graph.getDefaultParent();
for (let i = 2; i < cells.length; i++) {
const cellAttrs = cells[i].attributes;
if (cellAttrs.vertex) { // is Vertex
const vertexValue = cellAttrs.value ? cellAttrs.value.value : '';
// const vertexId = cellAttrs.id.value;
const geom = cells[i].children[0].attributes;
const xPos = Number(geom.x.value);
const yPos = Number(geom.y.value);
const height = Number(geom.height.value);
const width = Number(geom.width.value);
const style = cellAttrs.style.value;
console.log(style.length);
graph.insertVertex(parent, null, vertexValue, xPos, yPos, width, height, style);
}
}

}