需求
通常来讲,设计的BPMN流程图需要下载保存到指定的地方,bpmn原生的xml格式与图片格式都有可能。
添加点击按钮
在页面标签中添加两个button,用于点击触发保存。这里为了简单,防止button被bpmn的svg重叠,把button放在properties内部。
<template>
<div class="modeler">
<div id="canvas"></div>
<div id="properties">
<button id="saveBpmn" @click="saveToBpmn('test.bpmn')">保存为BPMN</button>
<button id="savePic" @click="saveToPic('leyo.svg')">保存为图片</button>
</div>
</div>
</template>
添加保存方法
在methods中添加两个异步方法saveToBpmn saveToPic,新版的bpmn-js推荐使用as