css - 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 似乎根本没有使用页面的打印 View ，所以 @media选项不会有帮助。

excelExport 事件

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

使用 ProxyURL

在 Grids Excel 对象下，您可以设置端点以在创建 Excel 电子表格时调用。这可能会给在保存前调整准备保存的电子表格的机会。有它的演示 here .演示是错误的( Controller 名称不是 Grid，它是 Excel_Export)并且即使在更正和标准 .ToolBar(tools => tools.Excel()) 后它对我也不起作用回来。也许是因为我没有使用 AJAX 将我的数据输入，或者它可能与演示一样损坏。将我的网格更改为 AJAX 并非不可能，但这也不是一项小工作。编辑: 我还添加了 .ForceProxy(true) 以达到事件的目的。到 Excel 定义。这个在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
                }
            }
        }
    });
};