Search code examples
gantt-chartdhtmlxdhtmlx-scheduler

Hide / Remove the DHMLX created watermark (footer) sentence when export pdf or png


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)

enter image description here


Solution

  • 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: enter image description here