angular与spring boot结合生成activiti 流程图

一、前端请求。注意在请求头部必须指明返回的是blob类型，即增加responseType: "blob"。headers里的Content-Type是指发送给后端的数据类型，这里是发送json类型，Authorization里放的是token令牌，用于后端验证身份的。前端发送一个包含taskId（activiti里的任务号）的json给后端。

private Option: Object = {
    responseType: "blob",
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': 'Bearer '+localStorage.getItem("token")
    })
  }

getProcessImage(taskId:string):Observable<any>{
    var data={"taskid":taskId};
    return this.http.post<any>('api/process/getprocessimage',data,this.Option);
  }

二、后端接收json数据，并生成图片流文件返回给前端

@RestController
public class ProcessImage {

    @RequestMapping(value = {"/process/getprocessimage"}, method = RequestMethod.POST, produces = MediaType.IMAGE_JPEG_VALUE)
    public  void getProcessImage(@RequestBody Map<String,Object> data, HttpServletResponse response) throws IOException {

        String taskid=(String) data.get("taskid");  //接收前端发来的taskid
        ProcessEngine processEngine = ProcessEngines.getDefaultProcessEngine();  
        TaskService taskService = processEngine.getTaskService();
        RepositoryService repositoryService=processEngine.getRepositoryService();
        HistoryService historyService=processEngine.getHistoryService();
        RuntimeService runtimeService = processEngine.getRuntimeService();
        Task task = taskService.createTaskQuery().taskId(taskid).singleResult();  //根据taskid查询任务
        String processInstanceId=task.getProcessInstanceId();   //根据任务找到流程实例号
        HistoricProcessInstance his = historyService.createHistoricProcessInstanceQuery().processInstanceId(processInstanceId).singleResult();
        BpmnModel model=repositoryService.getBpmnModel(his.getProcessDefinitionId());
        ProcessDiagramGenerator generator = new DefaultProcessDiagramGenerator();
        List<String> highLightedActivities=runtimeService.getActiveActivityIds(processInstanceId);
        List<String> highLightedFlows=new ArrayList<String>();
        InputStream is=generator.generateDiagram(model, "png", highLightedActivities, highLightedFlows,"宋体","宋体","宋体",null, 1.0);
        OutputStream os = null;
        try {
            BufferedImage image= ImageIO.read(is);
            response.setContentType("image/png");
            os = response.getOutputStream();
            if(image!=null) {
                ImageIO.write(image, "png", os);
            }else{
                System.out.println("图片为空");
            }
        }catch (IOException e){
            System.out.println("出错啦");
        }finally {
            if (os != null) {
                os.flush();
                os.close();
            }
        }
    }
}

三、前端接收图片流文件

html文件：只需要一行代码。

<div><img [src]="imgurl" width="450px" height="150px"/></div>

ts文件：constructor里声明两个变量，一个是上述第一步的ProcessService；另一外是DomSanitizer，需要引入。imgurl是一个SafeUrl类型，不能是string类型，否则报错。

import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

constructor( private process: ProcessService,
              private sanitizer: DomSanitizer) { }

imgurl: SafeUrl ="";

  getProcessImage(taskid:string):void{
    this.process.getProcessImage(taskid).subscribe(res=>{
      this.imgurl= this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(res));    
    })
  }

 

标签：os,activiti,spring,image,boot,taskId,processInstanceId,taskid,processEngine
来源： https://www.cnblogs.com/wwwzgy/p/15623691.html