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的更多相关文章

  1. bpmn.js & BPMN diagram

    bpmn.js & BPMN diagram BPMN 2.0 for the web https://github.com/bpmn-io/bpmn-js https://demo.bpmn ...

  2. SpringBoot+Activiti+bpmn.js+Vue.js+Elementui(OA系统审批流)

    引言:OA系统用到请假.加班.调休.离职,需要使用工作流进行流程审批 一:activiti流程设计器的选择(通过学习activiti工作流过程中,发现一款好的流程设计器将会更好的方便的设计好流程(主要 ...

  3. 微信内嵌H5网页 解决js倒计时失效

    项目要求:将H5商城页面嵌套到公司微信公众号里 项目本身的开发跟移动端网页并无太多差异,只是这昨天遇到一个问题,说是棘手,到也简单. 用户下单后,在选择支付方式页面,有个倒计时的逻辑(从下单时开始计算 ...

  4. h5页面使用js实现保存当前图片到手机相册

    很可惜,这个鬼东西微信内置浏览器不适用 页面: <!doctype html> <html> <head> <meta charset="UTF-8 ...

  5. Android 与H5之间的js交互

    之前项目做过一些Android和Html5之间js交互方面的东西,今天有时间就总结一下: 一.为什么要进行js交互: 为了方便原生开发和Html之间数据传递,在静态页面的情况下可以改变原生开发的页面: ...

  6. 兼容H5页面的js

    (function (doc, win) { let docEl = doc.documentElement; let resizeEvt = 'orientationchange' in windo ...

  7. H5移动端JS操作LocalStorage方法

    LocalStorage和SessionStorage LocalStorage 是对Cookie的优化 没有时间限制的数据存储 在隐私模式下不可读取 大小限制在500万字符左右,各个浏览器不一致 在 ...

  8. 【转】H5+css布局+js+前端和移动端ui+其他汇总

    无意间发现一个博客比较好,由于内容比较多,就把链接转过来,先保存着方便看的时候看. 感谢博主“张果” +++++++++++++++++++++++++++++++++++++++++++++++++ ...

  9. 【Make a H5 game】JS for beginner——FROM U2B

    https://www.youtube.com/watch?v=F2Dc-JlwgN4&feature=iv&src_vid=WfL4LNUL3R0&annotation_id ...

随机推荐

  1. MySQL:数据操作

    数据操作 一.插入数据 1.所有字段插入数据 语法: insert into 数据表名(字段名) values(插入的数据);(标准)insert into 数据表名values(插入的数据); 实例 ...

  2. python自学第12天 模块

    json , pickle模块 json,用于字符串和python数据类型间进行转换 pickle,用于python特有的类型和python数据类型间的进行转换 shelve 模块 是一个简单的k,v ...

  3. 仿XP系统的任务栏菜单

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  4. js实现table表格相同内容按需合并

    uniteTdCells(tableId) { var table = document.getElementById(tableId); for (let i = 0; i < table.r ...

  5. python 前端 css

    CSS(Cascading Style Sheet,层叠样式表) 是一种用来表现HTML或XML等文件样式的计算机语言. 作用:是用来美化HTML标签的,相当于给页面化妆. 每个css 都是有两部分组 ...

  6. 关于multi-index

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2017/02/22 将$D^{\alpha}$和$\partial^{\alpha}$区别对待.$D^{\alpha} ...

  7. spring-task解决定时问题

    *  spring3以上版本,spring-content自带 spring-task ,来解决工程中的定时问题  基于注解配置spring定时任务 spring配置文件如下: <?xml ve ...

  8. Spring history&Design Philosophy 简单介绍~

    SPRING框架的介绍和历史 Spring Framework是一个开源Java应用程序框架,最初是基于依赖注入(DI)和控制反转(IoC)的原理开发的. Spring Framework已经成长为控 ...

  9. mongo 使用find的返回值,转换为数组形式

    $rs = $mongo->find(); var_dump(iterator_to_array($rs));

  10. A New Function(LightOJ 1098)积性函数前缀和的应用

    题意:要求对于1~n,每个数的约数(不包括1和其本身)的和. 题解:由于题目数据有2*10^9之大,因而不能直接暴力.需要考虑积性函数的特性,由于必定有重复的约数出现,因而可以对重复约数所在的区间进行 ...