UI5 Chart save as PDF

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />

  <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m,sap.viz" data-sap-ui-resourceroots='{"view": "./"}' data-sap-ui-theme="sap_belize" data-sap-ui-xx-bindingSyntax="complex">
  </script>

  <!--Import thirdpart libraries (for actual project include these libraries in manifest.json)-->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
  <script type="text/javascript" src="https://canvg.github.io/canvg/rgbcolor.js"></script>
  <script type="text/javascript" src="https://canvg.github.io/canvg/StackBlur.js"></script>
  <script type="text/javascript" src="https://canvg.github.io/canvg/canvg.js"></script>

  <script>
    // Best practice would be to set this stuff up in an Component.js
    // but let's not over-complicate stuff for demonstration purposes
    var oModel = new sap.ui.model.json.JSONModel();
    // Load JSON in model
    oModel.loadData("Data.json");
    sap.ui.getCore().setModel(oModel);

    sap.ui.localResources("view"); //get access to view folder

    var app = new sap.m.App({
      initialPage: "idMain"
    });

    var page = sap.ui.view({
      id: "idMain",
      viewName: "view.Main",
      type: sap.ui.core.mvc.ViewType.XML
    });

    app.addPage(page);
    app.placeAt("content");
  </script>

</head>

<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>

</html>

# UI5 Chart Save as PDF
Save any UI5 chart as PDF for Printing

sap.ui.controller("view.Main", {

  _oView: null,

  onInit: function() {

    _oView = this.getView(); // store view reference for re-use
  },

  onBeforeRendering: function() {},

  onAfterRendering: function() {},

  onExit: function() {},


  /**
   * Approach: convert chart to SVG and pass this to jsPDF library to create PDF.
   * But the library jsPDF doesn't have much support for SVG....so we need to 
   * convert SVG to JPEG or PNG(steps 2 & 3 below) and create PDF
   **/
  onSavePDF: function() {
    // STEP 1: Get chart as SVG string
    var oVizFrame = _oView.byId("idVizFrame");

    // additional options can be passed to method exportToSVGString() method
    // refer documentation: https://sapui5.hana.ondemand.com/#/api/sap.viz.ui5.controls.VizFrame/methods/exportToSVGString
    var sSVG = oVizFrame.exportToSVGString({
      width: 800,
      height: 600
    });

    // STEP 2: Create Canvas element and pass chart SVG content to Canvas

    // var sCanvasHTML = '<canvas id="idCanvas" width="800px" height="600px"></canvas>';
    var oCanvasHTML = document.createElement("canvas");

    //add SVG chart content to canvas using library "canvg"
    canvg(oCanvasHTML, sSVG);


    // STEP 3: Get dataURL for content in Canvas as PNG/JPEG
    var sImageData = oCanvasHTML.toDataURL("image/png");

    // STEP 4: Create PDF using library jsPDF
    var oPDF = new jsPDF()
    oPDF.addImage(sImageData, 'PNG', 15, 40, 180, 160)
    oPDF.save("test.pdf");

  }

});

<sap.ui.core.mvc:View controllerName="view.Main"
    xmlns="sap.m"
    xmlns:viz="sap.viz.ui5.controls"
    xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
    xmlns:viz.data="sap.viz.ui5.data"
    xmlns:sap.ui.core.mvc="sap.ui.core.mvc" >
    <Page title="Vizframe Save as PDF">
        <content>
          <viz:Popover id="idPopOver"></viz:Popover>
          <viz:VizFrame id="idVizFrame" height="50%" width="100%"
          vizType='stacked_bar'>
            <viz:dataset>
              <viz.data:FlattenedDataset data="{/data}">
                <viz.data:dimensions>
                  <viz.data:DimensionDefinition name="Type" value="{type}" />
                  <viz.data:DimensionDefinition name="Category" value="{category}" />
                </viz.data:dimensions>
                <viz.data:measures>
                  <viz.data:MeasureDefinition name="Amount" value="{amount}"/>
                </viz.data:measures>
              </viz.data:FlattenedDataset>
            </viz:dataset>
            
            <viz:feeds>
              <viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Amount"/>
              <viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="Type"/>
              <viz.feeds:FeedItem uid="color" type="Dimension" values="Category"/>
            </viz:feeds>
          </viz:VizFrame>
          
          <Button text="Save Chart as PDF" press="onSavePDF" />
        </content>
    </Page>
</sap.ui.core.mvc:View>

{
  "data": [
    { "type": "Real", "category": "cat_03", "amount": "50000" },
    { "type": "Target", "category": "cat_03", "amount": "55000" },
    { "type": "Real", "category": "cat_02", "amount": "45000" },
    { "type": "Target", "category": "cat_02", "amount": "25000" },
    { "type": "Real", "category": "cat_01", "amount": "40000" },
    { "type": "Target", "category": "cat_01", "amount": "30000" }
  ]
}