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?
