Export to pdf style problem


#1

Hi, im trying to export the gantt to pdf.
a. im working eith reactjs
b. i trying to export with the gantt react component
c. i successful import all
the problem is that i have class display flex so my component has horizontal scroll bar (like the gantt) but when im exporting i get display block element(one on top of each other)

This is how my gantt display on the web

And this is how i get the file

This is the code i use (i put it inside ine of your snippet)

var header =’.calenderContainer{display:flex;text-align:center;background-color:white;padding-bottom:2vh;color:#a6a6a6;font-weight:500;padding-top:1vh;width:100%;overflow-x:auto;white-space:nowrap;font-family:Arial,Helvetica,sans-serif}.mainContainer{margin-top:.1%}.legendContainer{position:absolute;z-index:999999;border-top:.1px solid #a6a6a6;background:white;transform:translateZ(0);-webkit-transform:translateZ(0)}.legendItem{color:black;border:.1px solid #a6a6a6;border-top:none}.legendHeader{height:34px;text-align:center;padding-top:1vh;padding-right:20px;width:280px}.valueBackground{color:#000;border:2px solid #a6a6a6;border-radius:50%;height:100%;width:50%;font-size:.7vw;font-weight:600;margin:auto;margin-top:1px;padding-top:9px}.legendDescription{height:34px;border-top:none;border-right:none;font-weight:500;padding-top:2%;padding-left:1%;font-size:13px}.monthContainer{display:flex}.yearHeader{border:.1px solid #a6a6a6;font-size:12px;height:17px;padding-top:.25vh;border-bottom:none;border-left:none}.ItemRow{border:solid .2px #a6a6a6;text-align:center;height:34px;font-size:12px;border-left:none}.monthValue{padding:1px;border:solid .2px #a6a6a6;border-left:none;text-align:center;font-size:.8vw;height:35px}.monthNumber{height:16px;border-bottom:none}’;
function export_data(){
gantt.config.smart_scales = false;
gantt.render();
gantt.exportToPNG({
footer:""+header+""+’

Critical Path KPI

2013
09
0
10
1
11
2
12
3
2014
01
0
02
-2
03
1.5
04
2
05
3
06
3
07
3
08
0
09
0
10
0
11
0
12
0
2015
01
0
02
0
03
10
04
-10
05
-8
06
-7
07
-6
08
-5
09
-3.3
10
-2
11
0
12
1
2016
01
2
02
3
03
0
04
-2
05
1.5
06
2
07
3
08
3
09
3
10
0
11
0
12
0
2017
01
0
02
0
03
0
04
0
05
10
06
-10
07
-8
08
-7
09
-6
10
-5
11
-3.3
12
-2
2018
01
0
02
1
03
2
04
3
05
0
06
-2
07
1.5
08
2
09
3
10
3
11
3
12
0
2019
01
0
02
0
03
0
04
0
05
0
06
0
07
10
08
-10
09
-8
10
-7
11
-6
12
-5
2020
01
-3.3
02
-2
03
-13
’,
raw:true,
});
}
gantt.init("gantt_here");
gantt.parse(<data>);

Thank you for all the help!


#2

Hi @amitShimon,

The issue is connected to the “display: flex” property. For now, the export service is using the phantomjs to emulate the page on the server-side, and after that, the page is exporting to different formats. Unfortunately, the phantomjs is pretty old technology, and it doesn’t support the modern css rules.

The only solution I can suggest for now - is to replace flexes with some older css rules, so the page will be exported correctly.

We currently working on update the export service and in the future, this issue will be fixed, unfortunately, I can’t give you any ETA.

I will post in this topic when the export service will be updated.