Esiste un modo per convertire il grafico generato da c3.js in png e Png in Pdf nel lato client

Question

Voglio generare un file PDF sul lato client con un grafico e altri dati tabulari provenienti da un oggetto JSON.

Quello che segue è la parte associazione dati Javascript:

BindReportToPdf: function (data) { 
    //data is json object 
    var rows = data; 
    var columns = [ 
     { title: "S.No", key: "RowNum" }, 
     { title: "Title", key: "TTitle" }, 
     { title: "Phone Number", key: "PhoneNumber" }, 
     { title: "Loc. Name", key: "LocationName" }, 
     { title: "Dept. Name", key: "DepartmentName" } 
    ]; 
    var doc = new jsPDF("I", "mm", "a4"); 

    var canvas1 = document.getElementById("rptcanvas"); 
    var content = $("#sfDepartmentbar").html(); 
    canvg(canvas1, content, { 
     renderCallback: function() { 
      html2canvas($("#rptgraphsec"), { 
       onrendered: function (canvas) { 

        var html = ''; 
        html += "<div style='font-size:18px;'>Report Title</div>" 
        html += '<div>Generated By : ' + 'sanjeev'+ '</div>'; 

        doc.setFontSize(8); 
        doc.fromHTML(html, 10, 10, { 'width': 100 });        

        var imgData = canvas.toDataURL('image/png'); 
        doc.addImage(imgData, 'PNG', 5, 55, 200, 100); 

        if (data.length > 0) { 
         doc.autoTable(columns, rows, { 
          startX: 5, 
          startY: 165, 
          margin: 5, 
          tableWidth: 'auto', 
          theme: 'grid', 
          lineWidth: 0.1, 
          fillStyle: 'F', 
          pageBreak: 'auto', 
          styles: { 
           overflow: 'linebreak', 
           fontSize: 10, 
          }, 
          headerStyles: { 
           fillColor: [53, 133, 201], 
           columnWidth: 'auto', 
           rowHeight: 10, 
           cellPadding: 0.5, 
           halign: 'center', 
           valign: 'middle', 
          }, 
          bodyStyles: { 
           columnWidth: 'wrap', 
           rowHeight: 8, 
           halign: 'left', 
           valign: 'middle', 
           cellPadding: 0, 
           halign: 'center', 
           valign: 'middle', 
          },          
         }); 
        } 
        doc.save("Report.pdf"); 

       } 
      }); 
     } 
    });   

} 

e la parte HTML è:

file di

<div id="rptgraphsec"> 
    <div class="graphWrapper"> 
     <div id="sfDepartmentbar"> 
      // At here c3.js generated svg + div graph remains 
     </div> 
     <canvas id="rptcanvas" width="800px" height="300px"></canvas> 
    </div> 
</div> 

Il PDF è generato con tutti i dati tabulari e il formato, ad eccezione della sezione del grafico SVG . Tutto il codice JavaScript utilizzato è all'interno delle sezioni di tag. Qualche idea su cosa può essere sbagliato?

Answer 1

È possibile utilizzare una libreria di tipo svg to canvas come Fabric.js per eseguire il rendering di SVG. html2canvas supporta già svg rendering se si fornisce l'estensione svg disponibile here.