flowable导出 bpmn.xml

    @Override
    public void downLoadXmlByModelId(String modelId, HttpServletResponse response) {
        if (StringUtils.isBlank(modelId)) {
            return;
        }
        response.setContentType("text/html; charset=UTF-8"); //转码
        try {
            org.flowable.ui.modeler.domain.Model modelDatas = modelService.getModel(modelId);
            BpmnModel models = modelService.getBpmnModel(modelDatas);
            byte[] bpmnBytess = new BpmnXMLConverter().convertToXML(models);
            ByteArrayInputStream in = new ByteArrayInputStream(bpmnBytess);
            String filename = models.getMainProcess().getId() + ".bpmn20.xml";
            response.setContentType("application/xml");
            response.setHeader("Content-Disposition", "attachment; filename=" + filename);
            IOUtils.copy(in, response.getOutputStream());  //这句必须放到setHeader下面,否则10K以上的xml无法导出,
            response.flushBuffer();
        } catch (IOException e) {
            LOGGER.info("导出失败,失败信息为"+e.getMessage());
        }
    }
好的,下面是Vue3整合bpmn.js实现flowable流程设计器的代码实现。 首先,需要安装依赖: ``` npm install bpmn-js@8.0.1 npm install bpmn-js-properties-panel@0.44.0 npm install bpmn-js-properties-panel-provider@0.23.0 npm install camunda-bpmn-moddle@6.2.0 npm install vue-bpmn ``` 接着,在Vue组件中引入需要的文件: ```javascript import BpmnModeler from 'bpmn-js/lib/Modeler'; import propertiesPanelModule from 'bpmn-js-properties-panel'; import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'; import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'; import 'bpmn-js-properties-panel/styles/properties.less'; import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'; ``` 然后,在Vue组件中定义bpmn.js的Modeler和其他必要的变量: ```javascript data() { return { bpmnModeler: null, propertiesPanel: null, xml: null, }; }, ``` 接下来,在Vue组件的mounted生命周期函数中初始化bpmn.js的Modeler和其他必要的变量: ```javascript mounted() { this.bpmnModeler = new BpmnModeler({ container: '#canvas', propertiesPanel: { parent: '#properties', }, additionalModules: [ propertiesPanelModule, propertiesProviderModule, ], moddleExtensions: { camunda: camundaModdleDescriptor, }, }); this.propertiesPanel = this.bpmnModeler.get('propertiesPanel'); }, ``` 然后,在Vue组件的methods中定义一些必要的方法,比如打开一个流程图、保存一个流程图、导出一个流程图: ```javascript methods: { openDiagram(xml) { this.bpmnModeler.importXML(xml, (err) => { if (err) { console.log(err); } else { console.log('success'); } }); }, saveDiagram() { this.bpmnModeler.saveXML({ format: true }, (err, xml) => { if (err) { console.log(err); } else { console.log(xml); } }); }, exportDiagram() { this.bpmnModeler.saveSVG((err, svg) => { if (err) { console.log(err); } else { console.log(svg); } }); }, }, ``` 最后,在Vue组件的template中定义UI界面: ```html <template> <div> <div id="canvas"></div> <div id="properties"></div> <button @click="saveDiagram">保存</button> <button @click="exportDiagram">导出</button> </div> </template> ``` 在这个例子中,我们使用了Vue3和bpmn.js来实现了flowable流程设计器。通过这个例子,你可以了解到如何在Vue3中整合bpmn.js以及如何定义UI界面、打开、保存和导出流程图。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值