export the diagram as pdf and add the operators in group

[vvasil3v]

Hello, This is more as an enhancement questions.

Is it possible to :

• export the diagram in PDF file
• group the operators in some group and add group name
• add operator footer
• add more connections in one INPUT (different outputs in one input)

thank you.

[sdrdis]

Hello,

Thank you for your suggestions. Here are some answer:

• There is not a feature for exporting the diagram into PDF. But did you try https://github.com/eKoopmans/html2pdf ?
• What do you mean "to group operators" ? Should there be a UI for showing this group?
• Add operator footer : not yet a feature, but could be added
• Did you try to use the parameter multipleLinksOnInput ?

Thank you,

[vvasil3v]

thank you for the reply.

• multipleLinksOnInput - yes, all fine here :)
• html2pdf - I will try
• for the group.. in json object for example - operatorsgroup->operatorid1,operatorid2 from visual point of view, when they are placed, to have some background behind and some title of this div, so additional element behind these operators

[sdrdis]

Ok, for the last item it is not a feature yet. Sorry!

[vvasil3v]

ok :)

[vvasil3v]

hello, i have tested with html2pdf - it is exporting empty diagram without anything inside

tried var element = document.getElementById('chart_container'); var element = document.getElementById('flowchrt'); var element = document.getElementsByClassName('flowchart-links-layer');

did you tried or developed something else

thanks

[umarsuhail]

it exporting as PDF, but the path position is changed.

[MadTomT]

Did you ever get html2pdf working ? I can get it to show the operators but not the links.. they appear all over the place and massive compared to everything else.

[dlmohan]

I am trying this (I am using Vue with jquery-flowchart) Step 1 Reset the chart

resetZoomToScaleOne: function (e) {
            let current = this.currentZoom.scale
            let change = Math.abs(1 - current);
            this.flowchart.flowchart("setPositionRatio", 1);
            var options = {
                animate: true,
                linearZoom: true,
                increment: current < 1 ? change : -change,
                maxScale: this.possibleZooms[this.possibleZooms.length - 1],
                minScale: this.possibleZooms[0]
            };
            if (e) {
                options.focal = e;
            }
            this.flowchart.panzoom("zoom", options);
            this.currentZoom.scale = 1
        },

Step 2 this.focusOperator(startOperator.operatorId,100,500)

Focus the lefthand operator

focusOperator(operatorId,leftMarginOfFocusPoint,topMarginOfFocusPrompt) {
            var destOperatorData = this.flowchart.flowchart(
                "getOperatorData",
                operatorId
            );
            let left = destOperatorData.left;
            let top = destOperatorData.top;
            this.flowchart.panzoom("setMatrix", [1, 0, 0, 1, -left + leftMarginOfFocusPoint, -top + topMarginOfFocusPrompt])
        },

Step 3 Generate pdf using html2canvas

     setTimeout(
                function () {
                    html2canvas(document.querySelector('.chart'), {
                            scale: 1,
                            onclone: function (document) {
                                var svgElements = document.body.querySelectorAll('svg');
                                svgElements.forEach(function (item) {
                                    item.setAttribute("width", item.getBoundingClientRect().width);
                                    item.setAttribute("height", item.getBoundingClientRect().height);
                                    item.style.width = null;
                                    item.style.height = null;
                                });
                            }
                        })
                        .then((canvas) => {
                            const imgData = canvas.toDataURL('image/png');
                            const pdf = new jsPDF('p', 'pt', 'a4', true);
                            const imgProps = pdf.getImageProperties(imgData);
                            const pdfWidth = pdf.internal.pageSize.getWidth();
                            const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
                            pdf.addImage(imgData, 'PNG', 10, 10, pdfWidth, pdfHeight, '', 'FAST');
                            pdf.save(that.name);
                        });
                }, 1000)

Hope it helps