Open leCheveuCodeur opened 6 months ago
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>
Forgot to mention to change body overflow to auto and .sg-table-body, .sg-timeline height to 100%
@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.
Hello,
Do you have a solution that would allow complete printing of the gantt?
Best regards.