直接上代碼
<template>
<div class="view">
<div id="view" style="height:600px;width:800px"></div>
</div>
</template>
<script>
import BpmnViewer from 'bpmn-js/lib/Viewer'
export default {
name: 'BpmnViewer',
data () {
return {
bpmnModeler: null
}
},
mounted () {
this.initBpmnModeler()
const obj = JSON.parse(localStorage.getItem('bpmnModelerXML'))
this.createDiagram(obj.xml)
},
methods: {
initBpmnModeler () {
if (this.bpmnModerler) return
const containerEl = document.getElementById('view')
this.bpmnModerler && this.bpmnModerler.destroy() // 避免緩存
this.bpmnModerler = new BpmnViewer({
container: containerEl
})
},
async createDiagram (xml) {
const viewer = this.bpmnModerler
try {
const result = await this.bpmnModerler.importXML(xml)
const { warnings } = result
if (warnings && warnings.length) {
warnings.forEach(warn => console.warn(warn))
}
const canvas = viewer.get('canvas')
canvas.zoom('fit-viewport')
} catch (err) {
console.log(err.message, err.warnings)
}
}
}
}
</script>
運行結(jié)果