sapui5 vizframe图转换为pdf问题

Question

我无法使用版本1.28.30的vizFrame中的sapui5的{​​{1}}将图形转换为PDF，由于客户端而无法更改版本。这是我的代码，请检查并提供帮助。

我得到了一半的图形作为结果PDF。为此，我导入了所有需要的库，例如canvgg，jsPdf，rgbColor，stackblur.js。

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');
},

Answer 1

您的PDF尺寸为 A4 ；是 595 x 842 （考虑为72 PPI）。但是您的图片Canvas是 600 x 450 。这就产生了问题。尝试减小传递给Canvas方法的doc.addImage的大小。喜欢，

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

Answer 2

工作代码示例：

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"'));
},