Styling issue when exporting gantt chart to PDF


#1

1>
I’m working on exporting to PDF with export module on our server.
But on PDF, footer template is placed in the middle of the page when using our module where it works fine (footer located on the bottom of the chart) when using export.dhtmlx.com/gantt. How can I handle the footer location?

footer_in_the_middle

2>
The image above also shows that the grid area is cut off when using our export module. I’ve already got an answer that this can be fixed by adding style on “header” but it doesn’t work. Can I get an example for this issue as well?

3>
And there is another issue. Once I export the chart to PDF and then try to export again it shows redundant area with blank. It looks like the space is for the rest of the tasks that has been hidden as the number of tasks to be displayed is limited to 50 and my data has about 450 tasks. This always happens after I’ve exported the chart once. I’m using “onBeforeTaskDisplay” event to seperate tasks for exporting multiple PDF files. For example, if I have more than 50 tasks, call exportToPDF using loop where gantt.render() is called:

for (let i = 0; i < pageNum; i++) {
     pageIndex = i;  // => this index is used in "onBeforeTaskDisplay" 
     gantt.render();
     gantt.exportToPDF({...});
}

gantt.attachEvent("onBeforeTaskDisplay", function(id, task){
     if (isExportingState && pageNum) {
          return (pageIndex*50 <= task.$index) && (task.$index < (pageIndex + 1)*50);
     }
     return !task.$ignore;
});

After I export all the PDF files then I reset the config and call render.
I don’t know why only the first try is working fine.

4>
Is there any way to use material skin for exporting to PDF? It seems there is no option for material skin yet written in the documentation. I’m just wondering if material skin will be added onto the exportToPDF skin option in the near future.

Thank you.


#2

Hello,

I’m working on exporting to PDF with export module on our server.
But on PDF, footer template is placed in the middle of the page when using our module where it works fine (footer located on the bottom of the chart) when using export.dhtmlx.com/gantt. How can I handle the footer location?

Could you clarify when you installed the module? Maybe you have an old version. Please, contact the support team and tell which type of the export module you have (standalone module or docker image) and we’ll send you the update if you have the old version.

The image above also shows that the grid area is cut off when using our export module. I’ve already got an answer that this can be fixed by adding style on “header” but it doesn’t work. Can I get an example for this issue as well?

You can try adding raw: true parameter to export function.
Here are the examples of the export function with the styles:
http://snippet.dhtmlx.com/38d7bca8e
http://snippet.dhtmlx.com/a75db799f
http://snippet.dhtmlx.com/280e939f6
http://snippet.dhtmlx.com/b47827eb3

And there is another issue. Once I export the chart to PDF and then try to export again it shows redundant area with blank. It looks like the space is for the rest of the tasks that has been hidden as the number of tasks to be displayed is limited to 50 and my data has about 450 tasks. This always happens after I’ve exported the chart once. I’m using “onBeforeTaskDisplay” event to seperate tasks for exporting multiple PDF files. For example, if I have more than 50 tasks, call exportToPDF using loop where gantt.render() is called:

Could you provide a sample so that I can reproduce it locally and see what might be wrong?

Is there any way to use material skin for exporting to PDF? It seems there is no option for material skin yet written in the documentation. I’m just wondering if material skin will be added onto the exportToPDF skin option in the near future.

To export with the material skin, you need to add this parameter to the export function: skin:'material',. We’ll update the documentation and the samples in the future. Now, you can see how it might work in the following snippet:
http://snippet.dhtmlx.com/2eaec38f6


#3

1>, 4>
Actually we’re using quite recent version for export module as we purchased the product on 23th November.
Should I contact the support team so that I can update more recent version to display footer properly and apply material skin (skin: 'material') on PDF?

2>
I’m already using raw: true option for export function. This happens when using our export module not using export.dhtmlx.com/gantt.

3>
I think I need to investigate more either as I cannot replicate this issue on snippet without big amount data. I have only our own private data that should not be used for public example. I will let you know when I can provide you with an example.

Thank you for your help.


#4

Hello,
You can easily obfuscate or censor your data. You can check the following snippet:
https://snippet.dhtmlx.com/b02eb0329
If you don’t apply gantt.parse() function, you will see the updated data in the web-console.

Also, you can generate 400-500 tasks in the following snippet and apply your function, like:

gantt.exportToPDF({
  server:"http://0.0.0.0:8192",
  header:"<h1>My company</h1>",
  footer:"<h4>Bottom line</h4>",
  skin: 'material'
});

https://snippet.dhtmlx.com/5ba427087

If the issue is not reproduced in the snippet, it might be related to styles or Gantt configuration.

Please, contact the support team, probably the link for the export module was pointing to the old version.


#5

Hi Ramil,

I’ve tested my code using other small data but the issue is still happening.
I think it’s related to gantt configuration.

And I’ve got another issue with “onBeforeTaskDisplay”. I need to display the related links if the source or target task is shown in the chart but all the links related to hidden task are not showing. I’ve found “onFilterItem” event on linksStore where the links are filtered and I’ve tried to edit the code to display the links but the links were located in a wrong place. However modifying the code itself is not a good way so I’m wondering if there is a way to display the links related to hidden tasks.

Let me know if I should move this issue to new post.

Thanks.


#6

Hello,
You can save your data and configuration by applying the following function on the page:

(function(gantt) {

	serializeGantt(gantt);

	function serializeGantt(gantt) {
		gantt = gantt || window.gantt;

		var data = {
			version: gantt.version,
			data: gantt.serialize(),
			config: gantt.config
		};

		var jsTags = document.querySelectorAll("script[src*='dhtmlxgantt']");
		var js = [];
		for (var i = 0; i < jsTags.length; i++) {
			js.push(jsTags[i].src);
		}

		data.js = js;

		var cssTags = document.querySelectorAll("link[href*='dhtmlxgantt']");
		var css = [];
		for (var i = 0; i < cssTags.length; i++) {
			css.push(cssTags[i].href);
		}

		data.css = css;

		var text = "window.ganttSettings = " + JSON.stringify(data, null, 2);
		download("ganttSettings.conf", text);

	}

	function download(filename, text) {
		var element = document.createElement('a');
		element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
		element.setAttribute('download', filename);

		element.style.display = 'none';
		document.body.appendChild(element);

		element.click();

		document.body.removeChild(element);
	}
})(gantt);

After collecting all configuration and data, it will save it to a text file. You can replace/obfuscate the data if you need that. After that, you can send me that file or put the configuration in a snippet and share that snippet with me.
I will try to reproduce the issue locally and find what might be wrong.

I think it is better to create another topic for the second question.


#7

Hi,

I really appreciate your support.
I’ve found that it was not because of the configuration and our code affected the issue somehow.
We were hiding the chart DOM when exporting as we didn’t want to show the chart with different style (just for PDF) until we reset the configuration after exporting. This made each PDF file have big blank on the bottom of the chart area. Anyway, I’ll find another way to hide the chart when exporting.

Thanks a lot for your help.


#8

Hello,
Thank you for the clarification.
If you apply only the skin, you can specify the skin in the export function and you don’t need to render the chart.
If you apply styles, also, it is not always necessary to render the chart. Here is an example:
http://snippet.dhtmlx.com/cebc9722d