[REACT] Issues with PDF Export and Custom CSS in Gantt

[clovisapp]

Hello,

I’m experiencing some challenges when exporting the Gantt chart to PDF. The distribution on the page appears to be off, and I'm unable to make adjustments using the available Gantt options.

I would like to better manage the custom CSS we've applied to the Gantt chart. Specifically, I need help with the following:

Removing the navigation arrows
Eliminating the blank margins
Removing the custom bar handles we've added with CSS
Making the table on the left side optional during export
Any guidance on how to achieve these adjustments in the PDF export would be greatly appreciated!

Thank you.

[Maxim Gorkovsky]

Hello.

1. Regions could be hidden with a https://bryntum.com/products/gantt/docs/api/Grid/feature/export/PdfExport#event-beforePdfExport event. You need to collapse locked subgrid and it won't be visible in the exported PDF. On export event you'd need to expand it again
2. Drag handles are not normally visible on the exported page. I assume you use CSS to always show them? If so, you need to add a style to disable this behavior during export. Root element on the export page got .b-export class.
3. Extra margin looks like a scale issue. Proportions appear to be correct, but it just doesn't fill the page. This can happen when using browser print. You'd need experiment with scale options. I did not see such problem with PDF export server. If this is the server, please try making a runnable test case?
4. You can hide navigation button with CSS
   .b-export .b-scroll-buttons-container { display: none; }

[clovisapp]

Thank you so much! I was able to solve almost all the problems with your suggestions. However, we still haven't been able to fix the margins. We tried changing the height and width of the gantt, and we can change the proportions, but we still get the weird margins. Creating a runnable test for this implementation is not an easy task because we have many customizations and it would take us some time to do it, so we were wondering if you could help us by reviewing the attached files to see if you notice anything in our current implementation that might be causing this problem. Thanks in advance!

Archivo.zip

(8.28 KiB) Downloaded 4 times

[Maxim Gorkovsky]

This may be related to the issue:

".b-export": {
    height: "100vh",
    // scale: "1.4",
    width: "100vw",
  },

Page size is calculated based on the paper size to align with the printed page. That would explain margins and size of the element on the printed page.

Also, here you add export class to the element, you don't need to do it. Styles may break:

props.ganttRef.current!.instance.element.classList.add("b-export");

I suggest not using reserved class name if you need to style stmh before export.

[clovisapp]

Hello Bryntum team,

I stopped using the reserved class b-export and switched to custom-export. I also tried removing the fixed height/width and scaling to A3, but the margin issue persists. I managed to reduce the margins with transform: scale(1.085), but it’s not dynamic—if there are too many tasks, the Gantt chart overflows onto multiple pages.

Thanks for your help!

[Maxim Gorkovsky]

There should not be a need for you to specify zoom or set canvas size manually, this code should not be required:

".custom-export": {
    height: "1123px",
    // scale: "1.4",
    width: "1587px",
  },

.custom-export {
  transform: scale(1.085);
  transform-origin: top left;
}

Please provide html of the generated page, this is how to: https://github.com/bryntum/pdf-export-server/blob/main/docs/troubleshooting.md#inspect-outgoing-request