Activiti開發案例之activiti-app工作流導出圖片
- 2019 年 12 月 5 日
- 筆記
前言
自從 Activiti 和 JBPM4 分家以後，Activiti 目前已經發展到了版本7，本着穩定性原則我們最終選擇了6，之前還有一個版本5。
問題
在開發使用的過程中發現 Activiti 自帶的 Web 端作圖工具居然沒有圖片導出功能，這顯然是不能滿足我們的需求。於是參考導出 xml 功能，閱讀了部分源碼，也沒有發現相關的 API，難道官方人員忽略了一個這麼重要的功能！！！
由於Activiti-app 生成的表和 Activiti 本身自帶的表有很多結構性差異，雖然通過代碼也是可以生成工作流程圖，然而研究了半天並沒有找到對應關聯關係，有解決的小夥伴還請告知。
方案
後端路走不通，換個方向繼續走，功能還是要實現的，於是有了以下方案，前端 SVG 轉 PNG。
需要修改以下三個文件：
- editor/index.html
- editor/views/process.html
- display/displaymodel.js
index.html 引入：
<!-- Required to convert named colors to RGB --> <script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script> <!-- Optional if you want blur --> <script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.1/stackblur.min.js"></script> <!-- Main canvg code --> <script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script> <!-- endbuild -->
process.html 追加：
<div class="btn-group pull-right"> <a id="exportImg" onclick="exportImg()" class="btn btn-default" download="downImg" title="導出到圖片" > <i class="glyphicon glyphicon-picture"></i> </a> </div>
displaymodel.js 追加：
var imagedata = ""; jQuery(function() {// 初始化內容 setTimeout(function () { //延時初始化，為了保證畫布完整 var svgXml = jQuery('#bpmnModel').html(); var canvas = document.createElement('canvas'); //準備空畫布 canvg(canvas, svgXml); imagedata = canvas.toDataURL('image/png'); }, 3000); }); function exportImg(){ // 如果瀏覽器支持msSaveOrOpenBlob方法（也就是使用IE瀏覽器的時候），那麼調用該方法去下載圖片 if (window.navigator.msSaveOrOpenBlob) { var bstr = atob(imagedata.split(',')[1]) var n = bstr.length var u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } var blob = new Blob([u8arr]) window.navigator.msSaveOrOpenBlob(blob, 'BPMN20流程圖.png') } else { var a = jQuery("#exportImg"); a.attr('href',imagedata);//將畫布內的信息導出為png圖片數據 a.attr('download',"BPMN20流程圖.png");//設定下載名稱 } }
演示效果
由於設置了延遲，進入頁面稍等片刻，點擊導出圖片按鈕即可下載工作流圖片。
兼容性
谷歌，微軟Edge，360急速瀏覽器沒有問題，IE內核相關瀏覽器無法導出 ，反正已經淘汰了。
