vue中使用bpmn.js来画流程图(二)

上节主要介绍在bpmnjs在vue中的安装以及基础的应用。

具体查看 vue中使用bpmn.js来画流程图(一)。

这节主要是使用bpmn.js输出xml(saveXML)和svg(saveSVG)。

具体代码

<template>
  <div>
    <div id="canvas" class="canvas" ref="canvas"></div>
    <button type="button" @click="savexml">输出xml</button>
    <button type="button" @click="savesvg">输出svg</button>
  </div>
</template><script>
  import BpmnModeler from 'bpmn-js/lib/Modeler'  
  import {bpmnXmlStr} from '存放bpmn的文件'w

  export default{
    mounted(){
        this.init()
    },
    data(){
        return{
        }
    },
    methods:{
        init(){
            const canvas=this.$refs.canvas;
            this.bpmnModeler=new BpmnModeler({
                container:canvas
            })
            this.createNewDiagram();
        },
        createNewDiagram(){
            const that=this;
            that.bpmnModeler.importXML(bpmnXmlStr,function(err){
                if(err){
                    this.$message.success('初始化失败');
                }else{
                    this.$message.success('初始化成功');
                }
            })
        },
        //输出xml
        savexml(){
            this.bpmnModeler.saveXML({format:true},(err,xml) => {
                console.log(xml)
            })
        },
        //输出svg
        savesvg(){
            this.bpmnModeler.saveSVG({format:true},(err,svg) =>{ 
                console.log(svg)
            })
        }
    }
  }
</script>
<style>
</style>

输出控制台查看。

如果需要下载下来。在methods中添加方法。

download(type,data,name){
    let dataTract='svg';//可以以type传进来。
    const a=document.createElement('a');
    name=name||`diagram.${dataTract}`
    a.setAttribute(
        'href',
        `data:application/bpmn20-xml;charset=UTF-8,${encodeURIComponent(data)}`
    );
    a.setAttribute('target','blank')
    a.setAttribute('dataTract',`diagram:download-${dataTract}`);
    a.setAttribute('download',name);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}