How can i save diagram and svg in angular

Developers Modeler
1

How can i save diagram and svg bpmn in angular

2

What did you try? Where did you get stuck?

3

i got this error :“ERROR TypeError: this.saveSVG is not a function”

this codes:

import BpmnModeler from 'bpmn-js/lib/Modeler';
  ngOnInit(): void {

    this.modeler = new BpmnModeler({

      container: '#canvas-js',
      width: '100%',
      height: '600px',


    });

   saveSVG(done) {
     this.modeler.saveSVG(done);
   }

    this.saveSVG((err, svg)=> {
      setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg);
    });
4

The error is saying exactly what is happening. You’ll have to create the saveSVG function so it is accessible in your component. This

saveSVG(done) {
     this.modeler.saveSVG(done);
}

is not working. Rather store the function as local variable

const saveSVG = (done) => {
   this.modeler.saveSVG(done);
};

saveSVG((err, svg) => {
   setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg);
});

Or outside the ngOnInit method to bind it to this.

5

i put outside ngOnInit but got this error

ERROR TypeError: done is not a function
    at Modeler.push../node_modules/bpmn-js/lib/Viewer.js.Viewer.saveSVG
6

have you tried Anyone can help me?

7

i solved it

this.modeler.saveSVG((err: any, svg: any) => {
  const blob = new Blob([svg], {type: 'text/plain;charset=utf-8'});
  FileSaver.saveAs(blob, 'bpmnSample.bpmn');
});
8

can you please send me html code for that is there any button we need to call saveSVG

9

Please do not necrobump old topics. Instead link to this thread from new topic.

10

can you please help how to customize proeprties panel when i select element custom proeprites added in properties panel

11

As @Niklas_Kiefer said, no necrobumping.

12