jsp
| <!--显示数据列表--> <tbody id="TableData" class="dataContainer" datakey="processDefList"> <c:forEach items="${pdList}" var="pd"> <tr class="TableDetail1 template"> <td>${pd.name} </td> <td align="CENTER">${pd.version} </td> <td> <a onclick="return window.confirm('确定删除当前记录吗？')" href="${pageContext.request.contextPath}/pd/deleteByKey?key=${pd.key}">删除</a>
扫描二维码关注公众号，回复：
5500777 查看本文章
<a href="javascript:void(0);" onclick="showPng('${pd.id}','${pd.name}')">查看流程图</a> </td> </tr> </c:forEach> </tbody> |
js
| <script type="text/javascript"> function showPng(pid,pname){ $.ajax({ type:"POST", data:{ "lcdyId":pid }, dataType:'json', url:"${pageContext.request.contextPath}/pd/showPng", async:true, cache:false, beforeSend:function(){ return true; }, success:function(list){ var imgSrc="data:image/png;base64,"; for(var i=0;i<list.length;i++){ imgSrc+=list[i]; } var img="<img src='"+imgSrc+"'>"; layer.open({ type:1, area:['800px','400px'], title:pname, shade:0.6, anim:1, shadeClose:true,//点击阴影处关闭 content:img }); }, error:function(){ layer.msg("流程图加载失败",{time:1000, icon:5, shift:6}); } }); } </script> |
controller
| /** * 显示png图片（文件下载） */ @RequestMapping("/showPng") @ResponseBody public List showPng(String lcdyId){ InputStream inputStream = processDefinitionService.findPngStream(lcdyId); byte[] data=null; try { data=new byte[inputStream.available()]; inputStream.read(data); } catch (IOException e) { e.printStackTrace(); } List<byte[]> list=new ArrayList<byte[]>(); list.add(data); return list; } |
service
| /** * 根据流程定义id获得png的输入流 */ @Override public InputStream findPngStream(String lcdyId) { return processEngine.getRepositoryService().getProcessDiagram(lcdyId); } |