gantt icon indicating copy to clipboard operation
gantt copied to clipboard

exportToPdf in A3 landscape format - pages are not exported with the same scale and "window" of export is incorrect

Open johnatfondion opened this issue 7 months ago • 3 comments

Description

I am trying to export a Gantt to a specific format in landscape more. However, when clicking the export button, the exported pages are overlapping, have different scales.

Image

Reproducible example

https://snippet.dhtmlx.com/3ptn5ru4

Expected output

  • Gantt is exported to pdf in A3 landscape
  • Each page have the same scale
  • Window of each page is correct

johnatfondion avatar Jul 11 '25 14:07 johnatfondion

@johnatfondion, I don't see anything wrong with the first 3 pages. When Gantt is cut, the scale cells of the next page and the chart itself starts at the same position where the previous one is ended. But it is true that the last page is scaled. The reason for that is that Electron that exports the page, tries to zoom it to fit the available width. It works the same way if you try to export the page by using Chrome’s Printing dialog: https://files.dhtmlx.com/30d/d45eb0451723218101ec3d06f90da552/shot_2020-12-18-12:20:20.png

This is not considered a bug as right now, it is possible to use the merge_pages config and receive a single file where all pages are merged: https://docs.dhtmlx.com/gantt/api__gantt_exporttopdf.html#multipageexport:~:text=Exporting%20data%20automatically%20in%20one%20file

For online export, you can do that only when the chart is not large (or as long as the export time is less than 20 seconds). With the standalone export module, there is no such limitation.

When you manually export the data several times, you need to add the padding-right style rule for the last page to force the container to occupy the width of the page. Here is the updated snippet: https://snippet.dhtmlx.com/2s51f0gg

Also, it is not clear what you mean by window.

gearcoded avatar Jul 15 '25 07:07 gearcoded

@gearcoded Thanks for coming back to me, what you have in the updated snippet is exactly what I need.

In our setup, using padding-right doesn't seem to have any effect on the #export_container. Is there anywhere I can read more on what other config could overwrite the padding?

johnatfondion avatar Jul 15 '25 10:07 johnatfondion

@johnatfondion, The updated export module has the parent element with the export_container ID, so, if you use the online export server or the standalone export module 0.7.0 or newer, it is better to shift the parent container. Otherwise, you can replace it by the gantt_here ID.

The idea here is to make sure that the right part of the page still has something to render. Otherwise, the Chromuim engine tries to zoom in the page, and we cannot control that. Adding the padding-right style rule to the Gantt container is the easiest thing. But you can do it another way. If you show custom HTML elements, you can place it on the right side, but you need to calculate the position of that element, and it should be a child item of the Gantt container.

gearcoded avatar Jul 16 '25 08:07 gearcoded