sapui5 vizframe graph to pdf issue

1
votes

I am unable to convert graph to PDF using vizFrame in sapui5 using version 1.28.30 can't change version due to client. Here is my code please check and please help.

I am getting half of a graph as result PDF. For this i have imported all library which is needed like canvgg, jsPdf, rgbColor, stackblur.js.

enter image description here

pressToPdf:function(oEvent){
    var oVizFrame = thatgrowth.getView().byId("ID_GROWTH_CHART_LENGTH_SCALE");   
    var id =  thatgrowth.getView().byId("ID_GROWTH_CHART_LENGTH_SCALE").sId
    var svg  = $("#"+id).find("svg.v-m-root").outerHTML()
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, 600, 450);
    canvgg(canvas, svg);
    var imgData = canvas.toDataURL('image/png');
     // Generate PDF
    var doc = new jsPDF('p', 'pt', 'a4');
    doc.addImage(imgData, 'PNG', 0, 0, 600, 450);
    doc.save('GrowthChart.pdf');
},
2
sapui5
I am getting half of a graph as result PDF.For this i have imported all librarry which is needed like canvgg, jsPdf, rgbColor, stackblur.js. Please help – SanUser
Your PDF is A4 size; which is 595 x 842. But your image is 600x450. – dhilmathy

2 Answers

2
votes

Working code sample:

pressToPdf:function(oEvent){
    var oVizFrame = thatgrowth.getView().byId("ID_GROWTH_CHART_LENGTH_SCALE");
    var svg  = oVizFrame.getDomRef().getElementsByTagName("svg")[1];
    var canvas = document.createElement('canvas');
    var bBox = svg.getBBox();
    canvas.width = bBox.width;
    canvas.height = bBox.height;
    var context = canvas.getContext('2d');
    context.fillstyle = "rgb(255,255,255)";  //Set the context background
    context.fillRect(0, 0, canvas.width, canvas.height); //Apply background to chart rect
    var imageObj = new Image();
    imageObj.onload = function()
    {
        context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
        var dataURL = canvas.toDataURL('image/jpeg');   //Save as JPEG instead of base64
        var doc = new jsPDF('l', 'mm', 'a4');           //A4 landscape 297 x 210
        var imgHeigth = 190 * (bBox.height / bBox.width);
        doc.addImage(dataURL, 'JPEG', 10, 20, 227, 180);  //Download full page chart as PDF
        doc.save('chart_in_pdf');
    };

    imageObj.src = "data:image/svg+xml," + 
          jQuery.sap.encodeURL(svg.outerHTML.replace(/^svg/, 
                              '<svg xmlns="https://www.w3.org/2000/svg" version="1.1"'));
},
1
votes

Your PDF is A4 size; which is 595 x 842 (considering it as 72 PPI). But your image Canvas is 600 x 450. That creates issue. Try reducing the Canvas size passed to doc.addImage method. Like,

doc.addImage(imgData, 'PNG', 0, 0, 590, 450);