I have had so many issues with the the exportToPDF. It was useful, but lacked a lot of ability in terms of what my company required of me for a printout. After months of trying to figure out how to get it to work, I started to work on a custom solution. I figured out I would share what I did and how it helped.
Basic Idea: Create a copy of the Gantt that allows for possibility to page break and use the browser`s print options for customizability.
HTML(Put this underneath the Gantt):
JS(I am utilizing jquery but the same can be accomplished in vanilla JS):var PrintStartDate, PrintEndDate, PrintAutosize
function TruePrint(){
PrintStartDate = gantt.config.start_date;
PrintEndDate = gantt.config.end_date;
PrintAutosize = gantt.config.autosize;
gantt.config.autosize = “xy”;
gantt.render()
let CurrGantt = $(#gantt_here).html()
$(.AsOfInsert).text($(#AsOfDate).val())
$(#LoadPrint).hide()
$(.LoadInnerPrint).empty()
let nt = <table> <thead>
nt += <tr style="z-index:10000001"><th>
nt += $(.gantt_grid_scale)[0].outerHTML
nt += </th><th>
nt += $(.gantt_task_scale)[0].outerHTML
nt += </th></tr>
nt += </thead><tbody>
let gr = $(.gantt_row)
let gtr = $(.gantt_task_row)
$(.gantt_task_row).each(function(i,e){
nt += <tr>
nt += <td>
nt += gr[i].outerHTML
nt += </td>
nt += <td class="AddBar" style="position: relative;">
nt += $(this)[0].outerHTML
nt += </td>
nt += </tr>
})
nt += </tbody><tfoot><td></td><td class="addLinks"></td></tfoot></table>
$(`.LoadInnerPrint`).append(nt)
$(`.gantt_task_line`).each(function(i,e){
let elm = $(e)
elm.css({`z-index`:`1000`,`top`:`17px`})
$($(`#LoadPrint`).find(`.AddBar`)[i]).append(e)
})
$(`#LoadPrint`).find(`.gantt_grid_column_resize_wrap`).remove()
$(`#LoadPrint`).find(`.gantt_task_cell`).css({`position`:``})
$(`#LoadPrint`).find(`.gantt_row,.gantt_task_row`).css({`position`:``,`line-height`:``,`left`:``,`top`:``})
$(`.gantt_task_link:not(.gantt_bar_task)`).each(function(i,e){
let SID = $(e).attr("class").split(` `)[1].split(`_`)[1]
let elm = $(e).find(`.gantt_link_arrow, .gantt_line_wrapper`).css({`z-index`:`1000`})
let init = 0
$(elm).each(function(i,e){
if(i == 0){
init = $(e).css(`top`).split(`p`)[0];
}
$(e).css({`top`:(($(e).css(`top`).split(`p`)[0] - init)+17)+`px`})
})
$(e).insertAfter($(`#LoadPrint`).find(`.gantt_task_line[data-task-id=`+SID+`]`))
})
}
addEventListener("beforeprint", (event) => {TruePrint()});
addEventListener("afterprint", (event) => {
gantt.config.start_date =PrintStartDate ;
gantt.config.end_date =PrintEndDate ;
gantt.config.autosize =PrintAutosize ;
$(`#gantt_here`).css({`width`:`100%`, `height`:`80vh`});
gantt.init("gantt_here");
gantt.parse(gantt.serialize())
});
CSS:
@media print {
.gantt_row ,.gantt_task_row {
page-break-inside: avoid;
}
body *:not(#LoadPrint, #LoadPrint *){
display: none;
}
#LoadPrint{
display:flex !important;
}
}
Explanation of what I am doing:
- Set the autosize to XY. This cause all rows and columns to display.
- Create a table in JS with two TDs. On to hold the grid half of the gantt and the other for the chart.
- Add in the Bars/Links with the corresponding TDs and change positioning to display in correct formation.
- Run function before print.
- In CSS, hide everything that is not the table gantt you just made. With the table format, you can put in page-break-inside: avoid; to stop the table from being cut in half on a row during print.
