Make an option to print the entire gantt

[leCheveuCodeur]

Hello,

Do you have a solution that would allow complete printing of the gantt?

Best regards.

[Moxemka]

Hi, You can use html-to-image package.

In case of using React:

  <IconButton //mui button
       color="secondary"
       disabled={isPrintLoading}       
       onClick={() => {
              setIsPrintLoading(true);
              htmlToImage.toPng(contextToPrint.current.current //useRef to div with id gantt-table
                     ).then((dataUrl) =>
                               {                               
                                  download(dataUrl, `${document.title.replace(/ /g, '_')}.jpeg`) //used downloadjs package because im lazy
                               }).then(() => {
                                     setIsPrintLoading(false);
                               }).catch((e) => {
                                       console.error(e);
                                               //handle any errors
                                       setIsPrintLoading(false);
                               })

                              }}>
                                {isPrintLoading ? <Autorenew className="Spin"/> : <Print />} //icons for button
 </IconButton>

[Moxemka]

Forgot to mention to change body overflow to auto and .sg-table-body, .sg-timeline height to 100%

[ANovokmet]

@Moxemka thanks for the solution.

I am not sure how should the gantt look printed out completely, you can always render it on a page, set the start, end times, display the rows and print the page itself, but I don't know how would a very long one be printed. Over multiple pages? With row headers appearing on every page? What if there is a lot of rows? I guess you can repeat the render with different parameters on several pages and print each of them.