Question

我正在使用kendo展示具有导出到excel功能的Grid。有一个页脚，我必须将对齐方式设置为正确，但是当我这样做时，excel会在该字段中显示HTML标签。我使用了来自kendo的推荐代码来删除Html，但有些却不起作用。我在页脚和excel导出功能中添加了div标签，也从excel中删除了HTML。

<!DOCTYPE html>
<html>
    <head>
        <base href="https://demos.telerik.com/kendo-ui/grid/excel-export">
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common-material.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.mobile.min.css" />
        <script src="https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2019.2.514/js/jszip.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>
    </head>
    <body>
        <div id="example">
            <div id="grid"></div>
            <script>
                $("#grid").kendoGrid({
                    toolbar: ["excel"],
                    excel: {
                        fileName: "Kendo UI Grid Export.xlsx",
                      excelExport: function(e) {
                var rows = e.workbook.sheets[0].rows;
                for (var ri = 0; ri < rows.length; ri++) {
                var row = rows[ri];
                if (row.type == "group-footer" || row.type == "footer") {
                  for (var ci = 0; ci < row.cells.length; ci++) {
                    var cell = row.cells[ci];
                    if (cell.value) {
                      // Use jQuery.fn.text to remove the HTML and //get only the text
                      cell.value = $(cell.value).text();
                      // Set the alignment
                      cell.hAlign = "right";
                    }
                  }
                }
                }
                },
                        proxyURL: "https://demos.telerik.com/kendo-ui/service/export",
                        filterable: true
                    },
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                        },
                        schema:{
                            model: {
                                fields: {
                                    UnitsInStock: { type: "number" },
                                    ProductName: { type: "string" },
                                    UnitPrice: { type: "number" },
                                    UnitsOnOrder: { type: "number" },
                                    UnitsInStock: { type: "number" }
                                }
                            }
                        },
                        pageSize: 7,
                        group: {
                            field: "UnitsInStock", aggregates: [
                                { field: "ProductName", aggregate: "count" },
                                { field: "UnitPrice", aggregate: "sum"},
                                { field: "UnitsOnOrder", aggregate: "average" },
                                { field: "UnitsInStock", aggregate: "count" }
                            ]
                        },
                        aggregate: [
                            { field: "ProductName", aggregate: "count" },
                            { field: "UnitPrice", aggregate: "sum" },
                            { field: "UnitsOnOrder", aggregate: "average" },
                            { field: "UnitsInStock", aggregate: "min" },
                            { field: "UnitsInStock", aggregate: "max" }
                        ]
                    },
                    sortable: true,
                    pageable: true,
                    groupable: true,
                    filterable: true,
                    columnMenu: true,
                    reorderable: true,
                    resizable: true,
                    columns: [
                        { field: "ProductName", title: "Product Name", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },
                        { field: "UnitPrice", title: "Unit Price", aggregates: ["sum"] },
                        { field: "UnitsOnOrder", title: "Units On Order", aggregates: ["average"], footerTemplate: "Average: #=average#",
                            groupFooterTemplate: "Average: #=average#" },
                        { field: "UnitsInStock", title: "Units In Stock", aggregates: ["min", "max", "count"], footerTemplate: "<div style='text-align:right'> Min: #= min # Max: #= max # </div>",
                        groupHeaderTemplate: "Units In Stock: #= value # (Count: #= count#)" }
                    ]
                });

            </script>
        </div>
    </body>
</html>

导出到Excel Kendo网格

0 个答案: