I want to create a client side PDF file with graph and other tabular data coming from a JSON object.
The following is part of the Javascript data binding:
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:
<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>
A PDF file is generated with all tabular data and format, except for the SVG column. All JavaScript code is used in tag sections. Any ideas on what might be wrong?