Gibt es eine Möglichkeit, c3.js generierte Grafik in png konvertieren, und Png in Pdf in Client-Seite

Question

Ich möchte eine PDF-Datei auf der Client-Seite mit einem Diagramm und anderen tabellarischen Daten aus einem JSON-Objekt generieren.

Das Folgende ist der Javascript-Datenbindung Teil:

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"); 

       } 
      }); 
     } 
    });   

} 

Und der HTML-Teil ist:

<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> 

Die PDF-Datei mit allen Tabellendaten und das Format erzeugt wird, mit Ausnahme des SVG Graph Abschnitt . Der gesamte verwendete JavaScript-Code befindet sich innerhalb von Tag-Abschnitten. Irgendwelche Ideen über was kann falsch sein?

Answer 1

Sie können eine SVG-Canvas-Bibliothek wie Fabric.js verwenden, um das SVG zu rendern. html2canvas hat bereits Unterstützung für svg rendering, wenn Sie die verfügbare Svg-Erweiterung here bereitstellen.