5.流程图的保存

需求

       通常来讲，设计的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推荐使用async+await方式代替老式的callback写法，具体参考https://github.com/bpmn-io