Exporting gantt with dhtmlx works fine, but I wondered if there is a way to hide or remove the sentence in watermark (footer):
This document is created with dhtmlx library: http://dhtmlx.com
This sentence is generated when export to pdf or png at the bottom of the doc (even below footer)
The footer (watermark) will be there if you use the export for free.
It's only removed if you buy a paid version of dhtmlxGantt, here are the conditions: https://dhtmlx.com/docs/products/dhtmlxGantt/export.shtml#:~:text=Free%20Online%20Export%20Service
If you already have the paid version of the component, you can contact dhtmlx sales regarding it. They remove the watermark by whitelisting the domain where your app is hosted (from where the export is called), so it doesn't happen automatically when you buy the license, you have to request it.
It's also possible to deploy the export locally, the local version doesn't add watermarks. You get the local install with more expensive licenses, or you can buy it separately
I found a way to hide for free the watermark by using the footer using position: absolute. This example will use background red but you can use another color.
Based on the dhtmlx ExporttoPDF we can easily modify the css by using a <style> element, so I did something like this:
HTML FOR EXPORT TO PDF:
<input type="button" onclick='gantt.exportToPDF({
footer:`<style>
#footer-container{ position:relative; }
h4{ width:100%; background: red; position: absolute; top:-10px; }
</style>
<div id="footer-container">
<h4>Bottom Line</h4>
</div>`
})'>
CSS included in HTML above FOR EXPORT TO PDF:
#footer-container{
position:relative;
}
h4{
position: absolute;
top:-10px;
width:100%;
background: red;
}
HTML FOR EXPORT TO PNG:
<input type="button" onclick='gantt.exportToPNG({
footer:`<style>
#footer-container{ position:relative; }
h4{ width:100%; background: red; position: absolute; top:-10px; }
</style>
<div id="footer-container">
<h4>Bottom Line</h4>
</div>`
})'>
CSS included in HTML above FOR EXPORT TO PNG:
#footer-container{
position:relative;
}
h4{
position: absolute;
top:-10px;
width:100%;
background: red;
}
Output:
