Time performance issue when exporting gantt as pdf and excel

Gantt
#1

Hello @ramil
I want to export the Gantt chart as PDF or Excel… but it takes more time than expected to get the PDF and the chart part is exported successfully but cut off if there is a scroll in long scales… Is there a specific tip to make it more performant … here is a code sample used

export(gantt: any, type: String) {
var base = window.location.href.substring(0, window.location.href.indexOf(“#”)-1);
const styles = []
for (const itemStyle in document.styleSheets) {
try {
const rules = (document.styleSheets[itemStyle])?.cssRules
for (const rule in rules) {
styles.push(rules[rule].cssText)
}
} catch (e) {}
}
if (type == ‘PDF’) gantt?.exportToPDF({
raw: true,
header: <link rel="stylesheet" crossorigin="anonymous" type='text/css' href="${base}/assets/fontawesome-pro-5.8.2-web/css/all.min.css"/> <link rel="stylesheet" crossorigin="anonymous" type='text/css' href="${base}/assets/fontawesome-pro-5.8.2-web/css/v4-shims.min.css"/> <style> .fa { display: inline; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: 1; font-family: FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> <style>${styles.join(" ") }</style>
});
else {
gantt?.exportToExcel({
columns: this.exportedColumns,
date_format: this.exportedDateFormat
});
}
}

#2

Hello Wafia,
If you enable the raw mode for PDF export, Gantt needs to render all HTML elements, then it will send them to the export server. So, it is expected that it takes time to do that.
You can speed it up if you enable the static_background config, then Gantt will use the images of the timeline cells instead of actual HTML elements:
https://docs.dhtmlx.com/gantt/api__gantt_static_background_config.html

Or you can disable the show_task_cells config, then Gantt won’t render the timeline cells at all:
https://docs.dhtmlx.com/gantt/api__gantt_show_task_cells_config.html

Another thing you can do is to change the scale settings. If you have the day scale, you can change it to week or month, then it will take less time to render the timeline.

If the timeline is not fully displayed in the exported PDF file, that bug should occur because of the layout configuration. The dev team will fix it in the future, but I cannot give you any ETA.

For now, I have the following workarounds:

Add the style rule to extend the timeline only on the export module:
http://snippet.dhtmlx.com/5/7b1605226
http://snippet.dhtmlx.com/5/0821bda46

Use the autosize config to stretch the grid, then restore the previous width:
http://snippet.dhtmlx.com/5/343f8e2a6
https://snippet.dhtmlx.com/5/810d70012

The bug doesn’t occur when you export to PDF without the raw: true parameter.

Also, exporting the data to Excel should work correctly with your configuration as you don’t export the timeline part.

#3

Thanks for helping with this. there are few remaining points here
now to get the export using Gantt export it takes data to another URL. Is there a way to export it directly from the original app without redirecting it to another external service?

#4

Hello Wafia,
You can use the standalone export module to import and export the data:

To use it, you need to specify the server URL in the server parameter:
https://docs.dhtmlx.com/gantt/desktop__export.html#:~:text=any%20HTML%20here-,server,-(string)%20sets

Right now, there is no way to import and export the data only on the client-side without using the export server.

You can try using the html2canvas component to export the data to PNG, but the sizes are limited by the browser, and the maximal sizes are 16384х16384.

Here is the snippet:
http://snippet.dhtmlx.com/5/8689c7a44

For the PDF export, you can try using the native printing function in the browser, but in that case, you need to change the scale settings to fit the available formats:

1918×994 253 KB

https://snippet.dhtmlx.com/zntzpuij