[英]Is there any way to convert c3.js generated graph to png, and Png to Pdf in client side
我想在客户端使用来自JSON对象的图形和其他表格数据生成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>
除SVG图形部分外,将使用所有表格数据和格式生成PDF文件。 所有使用的JavaScript代码都在标记部分中。 关于什么是错的任何想法?
您可以使用svg绘制画布库(例如Fabric.js)来呈现SVG。 如果您在此处提供svg扩展名,则html2canvas已经支持svg渲染 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.