vue+bpmn导入xml样板

还是先引入依赖

npm i bpmn-js

然后大家可以下载我上传的
xmlStr.js
https://download.csdn.net/download/weixin_45966674/86339571
将他放在 项目 src 下的 assets目录下
这就是个 xml的样例魔板文件
然后在要使用 bpmn的文件中编写代码如下

<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
  </div>
</template>

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler' // 引入 bpmn-js
import xmlStr from '@/assets/xmlStr'
export default {
    
    
  data () {
    
    
    return {
    
    
      bpmnModeler: null
    }
  },
  methods: {
    
    
    async createNewDiagram () {
    
    
			// 将字符串转换成图显示出来
        try {
    
    
            await this.bpmnModeler.importXML(xmlStr);
            this.success();
        } catch (err) {
    
    
          console.log(err);
        }
		},
  },
  mounted () {
    
    
    const canvas = this.$refs.canvas
    // 生成实例
    this.bpmnModeler = new BpmnModeler({
    
    
      container: canvas
    })
    this.createNewDiagram() // 新增流程定义
  }
}
</script>

<style lang="scss">
  /*左边工具栏以及编辑节点的样式*/
  @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';
  .containers{
    
    
    position: absolute;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    .canvas{
    
    
      width: 100%;
      height: 100%;
    }
    .bjs-powered-by {
    
    
      display: none;
    }
  }
</style>