}
})
},
// 下载为SVG格式,done是个函数，调⽤的时候传⼊的
saveSVG (done) {
// 把传⼊的done再传给bpmn原型的saveSVG函数调⽤
this.bpmnModeler.saveSVG(done)
},
// 下载为SVG格式,done是个函数，调⽤的时候传⼊的
saveDiagram (done) {
// 把传⼊的done再传给bpmn原型的saveXML函数调⽤
this.bpmnModeler.saveXML({ format: true }, function (err, xml) {
done(err, xml)
})
},
// 当图发⽣改变的时候会调⽤这个函数，这个data就是图的xml
setEncoded (link, name, data) {
// 把xml转换为URI，下载要⽤到的
const encodedData = encodeURIComponent(data)
// 获取到图的xml，保存就是把这个xml提交给后台
// 下载图的具体操作，改变a的属性，className令a标签可点击，href令能下载，download是下载的⽂件的名字      if (data) {
link.className = 'active'
link.href = 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData
link.download = name
}
}
},
mounted () {
// 获取到属性ref为“content”的dom节点
// 获取到属性ref为“canvas”的dom节点
const canvas = this.$refs.canvas
/
/ 建模，官⽅⽂档这⾥讲的很详细
this.bpmnModeler = new BpmnModeler({
container: canvas,
// 添加控制板
propertiesPanel: {
parent: '#js-properties-panel'
},
additionalModules: [
// 左边⼯具栏以及节点
propertiesProviderModule,
// 右边的⼯具栏
propertiesPanelModule
],
moddleExtensions: {
camunda: camundaModdleDescriptor
}
})
// 下载画图
let _this = this
// 获取a标签dom节点
const downloadLink = this.$refs.saveDiagram
const downloadSvgLink = this.$refs.saveSvg
/
/ 给图绑定事件，当图有发⽣改变就会触发这个事件
('commandStack.changed', function () {
_this.saveSVG(function (err, svg) {
_this.setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg)
})
svg canvas_this.saveDiagram(function (err, xml) {
_this.setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml)
})
})
}
}
</script>
1.⼀打开页⾯
2.修改之后下载按钮亮起完整项⽬代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。