Is there any way to convert c3.js generated graph to png, and Png to Pdf in client side

Question

I want to generate a PDF file on the client side with a graph and other tabular data coming from a JSON object.

The following is the Javascript data binding part:

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

               }
           });
       }
   });          

}

And the html Part is:

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

The PDF file is generated with all tabular data and format, except the SVG graph section. All the JavaScript code used is within tag sections. Any ideas about what can be wrong?

Answer 1

You can use a svg to canvas library such as Fabric.js to render the SVG. html2canvas has already support for svg rendering if you provide the svg extension available here .