bpmn.js网站地址:https://bpmn.io/toolkit/bpmn-js/
bpmnjs是一款工作流绘制框架,遵循了bpmn2.0规范,实现从前台绘制工作流到后台执行的效果。
图示:
但bpmnjs只给出了vue提供方案和操作:
h5使用案例(自己的资源):https://download.csdn.net/download/sinat_21587657/10708854
包含画图下载等。
部分方法说明:
定义和获取显示区域
var BpmnJS = window.BpmnJS;
var bpmnViewer = new BpmnJS({
container : '#canvas'
});
模板装载和触发事件
bpmnViewer.importXML(模板bpm代码, function(err){
if (err) { return fail(err); }
try {
var canvas = bpmnViewer.get('canvas');
canvas.zoom('fit-viewport');
var eventBus = bpmnViewer.get("eventBus");
eventBus.on('element.click', function(evt) {
//点击元素,弹出页面可以在这里写
// alert(0);
});
return success();
} catch (e) {
return fail(e);
}
});
下载和保存
bpmnViewer.saveXML(...)
具体代码需下载观看。