8
JSONオブジェクトから来るグラフと他の表形式のデータでクライアント側でPDFファイルを生成します。c3.js生成グラフをpngに変換し、Pngをクライアント側のPdfに変換する方法はありますか?
次は、結合部分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");
}
});
}
});
}
とHTMLパートは次のとおりです。
<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>
PDFファイルをSVGグラフ部分を除いて、すべての表形式のデータやフォーマットで生成されます。使用されるすべてのJavaScriptコードはタグセクション内にあります。何が間違っているかもしれないかについてのアイデア?