vue集成BPMN.js实现流程图的显示，bpmn格式下载

索隆迷路了~

已于 2024-10-11 10:29:40 修改

阅读量225

点赞数 1

文章标签： javascript vue.js 流程图

于 2024-09-14 08:55:27 首次发布

本文链接：https://blog.csdn.net/2201_75763401/article/details/142245814

版权

1、安装插件

npm install --save bpmn-js

2、xml格式文件

export var xmlStr = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
<bpmn2:process id="Process_1" isExecutable="false">
  <bpmn2:startEvent id="StartEvent_1" />
</bpmn2:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
  <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
    
  </bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn2:definitions>`

3、实现流程图

<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
    <button @click="submitBpmn">保存为bpmn</button>
  </div>
</template>

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler'
import { xmlStr } from './xmlStr'
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
export default {
  name: 'ops-coffee',
  mounted() {
    this.init()
  },
  data() {
    return {
      bpmnModeler: null,
      container: null,
      canvas: null,
    }
  },
  methods: {
    init() {
      const canvas = this.$refs.canvas
      this.bpmnModeler = new BpmnModeler({
        container: canvas,
      })

      this.createNewDiagram()
    },
    createNewDiagram() {
      try {
        const result = this.bpmnModeler.importXML(xmlStr)
        const { warnings } = result
      } catch (err) {
        console.log(err)
      }
    },
  },
}
</script>

<style scoped>
.containers {
  width: 100%;
  height: calc(100vh - 82px);
}
.canvas {
  width: 100%;
  height: 100%;
}
</style>

4、保存bpmn事件

async submitBpmn() {
      try {
        const result = await this.bpmnModeler.saveXML({ format: true })
        const { xml } = result

        var xmlBlob = new Blob([xml], {
          type: 'application/bpmn20-xml;charset=UTF-8,',
        })

        var downloadLink = document.createElement('a')
        downloadLink.download = 'ops-coffee-bpmn.bpmn'
        downloadLink.innerHTML = 'Get BPMN SVG'
        downloadLink.href = window.URL.createObjectURL(xmlBlob)
        downloadLink.onclick = function (event) {
          document.body.removeChild(event.target)
        }
        downloadLink.style.visibility = 'hidden'
        document.body.appendChild(downloadLink)
        downloadLink.click()
      } catch (err) {
        console.log(err)
      }
    },