有什么方法可以在客户端将 c3.js 生成的图形转换为 png，并将 Png 转换为 Pdf答案

【问题标题】：Is there any way to convert c3.js generated graph to png, and Png to Pdf in client side有什么方法可以在客户端将 c3.js 生成的图形转换为 png，并将 Png 转换为 Pdf
【发布时间】：2016-02-26 18:53:22
【问题描述】：

我想在客户端生成一个 PDF 文件，其中包含来自 JSON 对象的图形和其他表格数据。

以下是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 代码都在标记部分中。有什么想法可能是错误的吗？

【问题讨论】：

标签： javascript jspdf html2canvas c3.js canvg

【解决方案1】：

您可以使用 svg to canvas 库（例如 Fabric.js）来呈现 SVG。 html2canvas 已经支持 svg rendering 如果您提供可用的 svg 扩展 here。

【讨论】：