Excel 导出中的 ClientGroupHeaderTemplate（Kendo ASP.NET MVC）

Question

我有一个网格，显示按债务类型分组的财务欠款列表，称为 现金类型。这些现金类型可以按多种方式分类，也可以不分类，这就是“正常”。当它们被分类时，我在 ClientGroupHeaderTemplate 中添加了一个可爱的徽章，因此它对用户来说很醒目。目前一切顺利。

@(Html.Kendo().Grid(Model.Arrears)
    .Name("arrearsGrid-" + Model.LeaseId.ToString())
    .HtmlAttributes(new { @class = "smallergrid" })
    .Columns(columns =>
    {
        columns.Bound(p => p.InvoiceNumber)
            .ClientTemplate("<a class=\"text-primary\" href=\"" + Url.Action("Invoice", "Arrear") + $"/#=InvoiceNumber#?buildingid=#=BuildingId#&leaseid={Model.LeaseId}\" target=\"_blank\">#=InvoiceNumber#</a>");
        columns.Bound(p => p.InvoiceDescription);
        columns.Bound(p => p.CashType)
            .ClientGroupHeaderTemplate("Cash Type: #= getCashTypeName(data.value) # (#= getDebtCategoryName(data.items[0].DebtCategory) #)");
        columns.Bound(p => p.InvoiceDate);
        columns.Bound(p => p.TransactionDate);
        columns.Bound(p => p.DaysOverdue);
        columns.Bound(p => p.InvoiceGross)
            .HtmlAttributes(new { @class = "text-right" });
        columns.Bound(p => p.OutstandingGross)
            .HtmlAttributes(new { @class = "text-right" });
    })
    .Sortable()
    .Excel(excel => excel
        .FileName("Kendo UI Grid Export.xlsx")
        .Filterable(true)
        .AllPages(true)
    )
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Group(g => g.Add(p => p.CashType))
    )
    .NoRecords(x => x.Template("<div class='empty-grid'></div>"))
)

问题是导出到 Excel 函数不对 ClientGroupHeaderTemplate 进行处理，并在电子表格中显示 <span>Cash Type: Rent <span class="d-print-none badge debt-category-1 ml-2">In Query</span></span>。

以下是我看到的可用选项，有些我已经打折了。这些真的是我最好的选择吗？

CSS（拒绝）

如您所见，使用 Bootstrap d-print-none 没有任何作用。从导出和隐藏列的所有帖子来看，Kendo 似乎根本没有使用页面的打印视图，因此 @media 选项不会有帮助。

excelExport 事件

使用KendoexcelExport event to customise the generated Excel workbook，不过，这个例子是文件创建。如果我走这条路，我怀疑从头开始写一个可能比解决 Kendo 限制更容易。无论哪种方式，删除 1 行 HTML 标记都需要大量工作。

使用 ProxyURL

在网格 Excel 对象下，您可以设置端点以在创建 Excel 电子表格时调用。这可能会给在保存前调整准备保存的电子表格的机会。有它的演示 here。演示是错误的（控制器名称不是 Grid，它是 Excel_Export）并且它对我不起作用，即使更正并且标准 .ToolBar(tools => tools.Excel()) 回来了。也许是因为我不是 AJAX输入我的数据，或者它可能和演示一样损坏。将我的网格更改为 AJAX 并非不可能，但这也不是一项小工作。 编辑： 我通过在 Excel 定义中添加 .ForceProxy(true) 来达到目的。 demo中没有提到，需要加.ToolBar(tools => tools.Excel())的说法也不正确；您可以从触发 Excel 导出的自己的按钮触发事件。

放弃并变得简单

我最后的选择是放弃徽章，只有文字。这是最快最可靠的选择，但它是通过忽略问题来解决问题。

Answer 1

所以我用另一种方式解决了这个问题。不过，我确定必须有一个 MVC 答案来解决这个问题。

我在我的网格中添加了一个事件

@(Html.Kendo().Grid(Model)
    ...
    .Events(e =>
    {
        e.ExcelExport("exportExcel");
    }
    ...
)

并创建了一个 JavaScript 中间件函数来在保存之前更改 Excel 文件。当然，此时您可以执行 JS 允许您执行的任何操作。下面的代码是设置列宽 (4)、删除 HTML 跨度标记、将字符串转换为数字并向该数字添加货币格式 (7) 的示例。获取货币符号的方法并不漂亮，但它是一些HTML标记中的字符串，我认为它不会很漂亮。

function exportExcel(e) {
    var sheet = e.workbook.sheets[0];

    var lastRow = sheet.rows[sheet.rows.length - 1];
    var lastCell = lastRow.cells[lastRow.cells.length - 1];
    var lastCellValue = lastCell.value.toString().replace(/<[^>]*>/, "").replace("</span>", "");
    var currency = lastCellValue.substring(0, 1);
    currency += "#,###,##0.00";

    sheet.columns[4].autoWidth = false;
    sheet.columns[4].width = 125;

    $.each(sheet.rows, function (index, row) {
        if (index > 0) {
            if (row.cells[0] != undefined) {
                if (row.cells[0].value != undefined) {
                    row.cells[0].value = row.cells[0].value.replace(/<[^>]*>/, "(").replace("</span>", ")");
                }
            }
            if (row.cells[7] != undefined) {
                if (row.cells[7].value != undefined) {
                    row.cells[7].value = row.cells[7].value.toString().replace(/<[^>]*>/, "").replace("</span>", "");
                    row.cells[7].value = Number(row.cells[7].value.toString().replace(/[^0-9\.-]+/g, ""));
                    row.cells[7].format = currency; // Why this prepends a backslash to the format I do not know
                }
            }
        }
    });
};

Excel 导出中的 ClientGroupHeaderTemplate（Kendo ASP.NET MVC）

ClientGroupHeaderTemplate in Excel Export (Kendo ASP.NET MVC)

css

kendo-ui

kendo-grid

kendo-asp.net-mvc

CSS（拒绝）

excelExport 事件

使用 ProxyURL

放弃并变得简单