SAPUI5 Gantt Chart export to PDF or print all chart

Question

I need to create button "Export to PDF" and transfer all data of a Gantt chart to PDF with the same layout. Can anyone help me with ideas or sources?

Alternatively, it could print the complete page, not print screen.

Thanks.

Answer 1

You can make use of jsPDF, its not perfect but it might be what you need.

Below is a snippet of how to implement jsPDF with a vizframe chart or used with an SAP App

You will need to play around with the height/width of the chart View and jsPDF settings to fit your preference.

var doc = new jsPDF('p', 'mm');
$("#print_btn").click(() => {
  html2canvas(document.body, {
    onrendered: function(canvas) {

      var img = canvas.toDataURL("image/jpg");
      doc.addImage(img, 'JPEG', 0, 0);

      doc.save("Chart.pdf");
    }

  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<div id="UIComp_0" class="v-info" aria-labelledby="UIComp_0-title" tabindex="0" style="height: 230px; width: 380px; position: relative; font-size: 10px; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><svg class="v-m-root" focusable="false" tabIndex="-1" width="100%" height="100%" style="left: 0px; top: 0px; height: 100%; width: 100%; display: block; cursor: default;"><defs></defs><g class="v-m-desc-title"><title id="UIComp_0-title">An Interactive Column Chart </title></g><g class="v-m-action-layer-group"></g><g class="v-m-decoration-layer-group"></g><g class="v-m-background"><rect class="v-background-body viz-plot-background v-morphable-background" x="0" y="0" width="380" height="230" style="fill:#ffffff"></rect></g><g class="v-m-title" transform="translate(62.34765625, 16)"></g><g class="v-m-legendGroup" transform="translate(16, 214)" role="listbox"><g class="v-m-legend" transform="translate(0,0)"><rect class="v-bound" width="0" height="0" visibility="hidden"></rect></g></g><g class="v-m-main" transform="translate(16, 16)"><g class="v-m-plot" transform="translate(46.34765625, 0)"><rect class="v-background-body viz-plot-background v-morphable-background" x="0" y="0" width="301.65234375" height="130.6" style="fill:#ffffff"></rect><clipPath id="plot_main_clipPath_246d5cd1-5ec9-41a1-b6bd-91685857ac7e"><rect y="-1" width="302.65234375" height="131.6"></rect></clipPath><rect class="v-plot-bound v-bound v-zoom-plot" width="301.65234375" height="130.6" fill="transparent"></rect><g clip-path="url(#plot_main_clipPath_246d5cd1-5ec9-41a1-b6bd-91685857ac7e)"><g class="v-plot-main" role="list" transform="translate(0, 0)"><g class="v-gridline-group"><g class="v-gridline" stroke="#e5e5e5" stroke-width="1" shape-rendering="crispEdges"><line class="v-gridline-mainline" x1="0" y1="130.6" x2="301.65234375" y2="130.6"></line></g><g class="v-gridline" stroke="#e5e5e5" stroke-width="1" shape-rendering="crispEdges"><line class="v-gridline-mainline" x1="0" y1="97.94999999999999" x2="301.65234375" y2="97.94999999999999"></line></g><g class="v-gridline" stroke="#e5e5e5" stroke-width="1" shape-rendering="crispEdges"><line class="v-gridline-mainline" x1="0" y1="65.3" x2="301.65234375" y2="65.3"></line></g><g class="v-gridline" stroke="#e5e5e5" stroke-width="1" shape-rendering="crispEdges"><line class="v-gridline-mainline" x1="0" y1="32.650000000000006" x2="301.65234375" y2="32.650000000000006"></line></g><g class="v-gridline" stroke="#e5e5e5" stroke-width="1" shape-rendering="crispEdges"><line class="v-gridline-mainline" x1="0" y1="0" x2="301.65234375" y2="0"></line></g></g><g class="v-datapoint-group"><g><path d="M102.82617187499999,130.6L102.82617187499999,8.1625L198.826171875,8.1625L198.826171875,130.6" fill="none" stroke-linejoin="round" stroke="#5899da" stroke-width="1" class="v-bar-series-path" display="none"></path><g data-id="0" data-datapoint-id="1" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(102.82617187499999, 8.1625)" fill-opacity="1"><rect width="96.00000000000003" height="122.4375" fill="#5899da" stroke="#ffffff" stroke-width="1px" stroke-opacity="1"></rect></g></g></g></g></g><g class="v-referenceline-group" clip-path="url(#plot_main_clipPath_246d5cd1-5ec9-41a1-b6bd-91685857ac7e)"><g class="v-referenceline-labels-group"></g></g></g><g class="v-m-categoryAxis v-m-xAxis" transform="translate(46.34765625, 130.6)" role="listbox"><rect class="v-bound" width="301.65234375" height="59.4" fill="transparent"></rect><g class="v-axis"><g class="v-m-axisScrollbar" transform="translate(0,25.4)"><g><rect class="v-m-scrollbarTrack" visibility="hidden" fill="#f7f7f7" stroke-width="0" stroke="#ffffff" width="301.65234375" height="12"></rect><rect class="v-m-scrollbarThumb" visibility="hidden" fill="#e6e6e6" width="301.65234375" height="12" transform="translate(0, 0)"></rect></g></g><g class="v-m-axisTitle" transform="translate(0,45.4)"><g class="v-title viz-axis-title" fill="#000000" font-size="12px" font-weight="regular" font-family="Arial, Helvetica, sans-serif" letter-spacing="0.5px" font-style="normal"><text dominant-baseline="auto" text-anchor="start" x="104.654296875" y="11">Chart Print PDF</text></g></g><g class="v-m-axisBody" transform="translate(0,0)" clip-path="url(#clip-path-bdc7fe18-34f8-4cca-8b3d-55fdc0a646da)"><clipPath class="v-clippath" id="clip-path-bdc7fe18-34f8-4cca-8b3d-55fdc0a646da"><rect x="-1" y="-1" width="303.65234375" height="27.4"></rect></clipPath><g class="v-line-group"><line class="v-valueaxisline v-line" shape-rendering="crispEdges" stroke="#cccccc" stroke-width="1" x1="-0.5" y1="0" x2="302.15234375" y2="0" style="pointer-events: none;"></line></g><g class="v-label-group"><g class="v-label v-morphable-label viz-axis-label v-axis-item index_0" fill="#333333" font-size="12px" font-weight="normal" font-family="Arial, Helvetica, sans-serif" font-style="normal" categorylabel-id="0" transform="translate(0,0)"><rect class="viz-axis-label-rect" fill="transparent" x="1" y="1" width="299.65234375" height="23.4"></rect><g class="v-axis-label-wrapper"><text x="122.58691406" y="17.4" text-anchor="start">chartValue</text></g></g></g></g></g></g><g class="v-m-valueAxis v-m-yAxis" transform="translate(0, 0)"><rect class="v-bound" width="46.34765625" height="130.6" fill="transparent"></rect><g class="v-axis"><g class="v-m-axisTitle" transform="translate(0,0)"><g class="v-title viz-axis-title" fill="#000000" font-size="12px" font-weight="regular" font-family="Arial, Helvetica, sans-serif" letter-spacing="0.5px" font-style="normal"><text dominant-baseline="auto" text-anchor="start" x="5.5" y="65.3" transform="rotate(-90,11,65.3)">%</text></g></g><g class="v-m-axisBody" transform="translate(22,0)"><clipPath class="v-clippath-labels" id="clip-path-f85dcd02-8845-4ac0-93d0-591dca6a8166"><rect x="-1" y="-11.2" width="26.34765625" height="153"></rect></clipPath><rect class="v-bound" width="24.34765625" height="130.6" fill="transparent"></rect><g clip-path="url(#clip-path-f85dcd02-8845-4ac0-93d0-591dca6a8166)"><g class="v-label-group"><g class="v-label v-morphable-label viz-axis-label" fill="#707070" font-size="12px" font-weight="normal" font-family="Arial, Helvetica, sans-serif" font-style="normal"><text text-anchor="start" x="6.67382812" y="134.79999999999998">0</text></g><g class="v-label v-morphable-label viz-axis-label" fill="#707070" font-size="12px" font-weight="normal" font-family="Arial, Helvetica, sans-serif" font-style="normal"><text text-anchor="start" x="0" y="102.14999999999999">20</text></g><g class="v-label v-morphable-label viz-axis-label" fill="#707070" font-size="12px" font-weight="normal" font-family="Arial, Helvetica, sans-serif" font-style="normal"><text text-anchor="start" x="0" y="69.5">40</text></g><g class="v-label v-morphable-label viz-axis-label" fill="#707070" font-size="12px" font-weight="normal" font-family="Arial, Helvetica, sans-serif" font-style="normal"><text text-anchor="start" x="0" y="36.85000000000001">60</text></g><g class="v-label v-morphable-label viz-axis-label" fill="#707070" font-size="12px" font-weight="normal" font-family="Arial, Helvetica, sans-serif" font-style="normal"><text text-anchor="start" x="0" y="4.2">80</text></g></g></g></g></g></g><g class="v-m-scrollbar" transform="translate(348, 0)"></g></g></svg>
  <div
    class="v-m-tooltip-container" actualwidth="380" actualheight="230" style="left: 0px; top: 0px; height: 0px; width: 0px; position: absolute;"></div>
</div>
<button id="print_btn">Export as PDF</button>

Answer 2

You can use the sap.gantt.simple.GanttPrinting Available since: 1.66

        controllerName="sap.gantt.sample.GanttPrinting.Gantt"
        height="100%"
        xmlns="sap.gantt.simple"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns:m="sap.m">
    <GanttChartContainer id="ganttContainer">
        <toolbar>
            <ContainerToolbar stepCountOfSlider="6">
                <m:Button text="Export to PDF" press="onExportPDF" />
            </ContainerToolbar>
        </toolbar>
    </GanttChartContainer>
<gnt2:GanttChartWithTable shapeDoubleClick="onSahpeDblClick" id="gantt1" ghostAlignment="Start" adhocLineLayer="Bottom"> </gnt2:GanttChartWithTable>
</mvc:View>

and in your controller file :

onExportPDF: function () {
        var oGantt = this.getView().byId("gantt1");
        var oGanttPrinting = new sap.gantt.simple.GanttPrinting();
        oGanttPrinting.setGanttChart(oGantt);
        oGanttPrinting.open();
        }

where GanttChartContainer id="ganttContainer"