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(...)
具体代码需下载观看。
关于h5使用bpmn.js的更多相关文章
-
bpmn.js &; BPMN diagram
bpmn.js & BPMN diagram BPMN 2.0 for the web https://github.com/bpmn-io/bpmn-js https://demo.bpmn ...
-
SpringBoot+Activiti+bpmn.js+Vue.js+Elementui(OA系统审批流)
引言:OA系统用到请假.加班.调休.离职,需要使用工作流进行流程审批 一:activiti流程设计器的选择(通过学习activiti工作流过程中,发现一款好的流程设计器将会更好的方便的设计好流程(主要 ...
-
微信内嵌H5网页 解决js倒计时失效
项目要求:将H5商城页面嵌套到公司微信公众号里 项目本身的开发跟移动端网页并无太多差异,只是这昨天遇到一个问题,说是棘手,到也简单. 用户下单后,在选择支付方式页面,有个倒计时的逻辑(从下单时开始计算 ...
-
h5页面使用js实现保存当前图片到手机相册
很可惜,这个鬼东西微信内置浏览器不适用 页面: <!doctype html> <html> <head> <meta charset="UTF-8 ...
-
Android 与H5之间的js交互
之前项目做过一些Android和Html5之间js交互方面的东西,今天有时间就总结一下: 一.为什么要进行js交互: 为了方便原生开发和Html之间数据传递,在静态页面的情况下可以改变原生开发的页面: ...
-
兼容H5页面的js
(function (doc, win) { let docEl = doc.documentElement; let resizeEvt = 'orientationchange' in windo ...
-
H5移动端JS操作LocalStorage方法
LocalStorage和SessionStorage LocalStorage 是对Cookie的优化 没有时间限制的数据存储 在隐私模式下不可读取 大小限制在500万字符左右,各个浏览器不一致 在 ...
-
【转】H5+css布局+js+前端和移动端ui+其他汇总
无意间发现一个博客比较好,由于内容比较多,就把链接转过来,先保存着方便看的时候看. 感谢博主“张果” +++++++++++++++++++++++++++++++++++++++++++++++++ ...
-
【Make a H5 game】JS for beginner——FROM U2B
https://www.youtube.com/watch?v=F2Dc-JlwgN4&feature=iv&src_vid=WfL4LNUL3R0&annotation_id ...
随机推荐
-
第K大数
控制数据箱(box.c/cpp/pas)[题目大意]现在给你一个数据箱,支持以下操作,加入元素,第 n次查询操作求当前情况下的第 n 大数.比如说,第 3 次查询操作求第三小的数.当然查询操作的给出方 ...
-
boost源码剖析----boost::any
boost源码剖析----boost::any 有的时候我们需要有一个万能类型来进行一些操作,这时候boost::any就派上用场了. boost::Any testInt(10); int val ...
-
springMVC spring hibernate pom.xml备份
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
-
Codeforces Round #336 (Div. 2)C. Chain Reaction DP
C. Chain Reaction There are n beacons located at distinct positions on a number line. The i-th bea ...
-
AngularJs中关于ng-class的三种使用方式说明
在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子. 而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性 这里有三种方法: 第一 ...
-
spring-AOP-ProxyFactoryBean代理的实例
1.一个代理模式的实例 通过 Proxy类进行代理 wait.java //定义一个接口 public interface wait { void say(); } //目标对象实现接口并重写方法 p ...
-
ASP.NET Core 网站在Docker中运行
Docker作为新一代的虚拟化方式,未来肯定会得到广泛的应用,传统虚拟机的部署方式要保证开发环境.测试环境.UAT环境.生产环境的依赖一致性,需要大量的运维人力,使用Docker我们可以实现一次部署, ...
-
巧用&;&;和|| 让逻辑代码更简洁,逼格看起来更高一点(玩笑脸)
通常当我们有一个需求 需要用到很多if else 进行条件筛选,例如: let level = 0; if(score > 12){ level = 4; } else if(score > ...
-
Turtle库学习笔记
一.Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它 ...
-
限定某个目录禁止解析php 、限制user_agent 、php的配制文件、PHP的动态扩展模块
1. 限定某个目录禁止解析php(有些目录用户可以上传文件或图片,可能会被恶意者上传其它文件):编辑:/usr/local/apache2.4/conf/extra/httpd-vhosts.conf ...