9

我想在客户端生成一个 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>

除 SVG 图形部分外，PDF 文件使用所有表格数据和格式生成。使用的所有 JavaScript 代码都在标记部分中。关于什么是错误的任何想法？

4

1 回答 1

0

您可以使用 svg to canvas 库（例如Fabric.js）来呈现 SVG。如果您在此处提供可用的 svg 扩展，则html2canvas 已经支持svg 渲染。

于 2015-11-27T03:28:13.377 回答