如何在标题单元格中使用多行将剑道网格导出到 excel答案

【问题标题】：How to export kendo grid to excel with multi-lines in header cells如何在标题单元格中使用多行将剑道网格导出到 excel
【发布时间】：2017-10-04 15:06:22
【问题描述】：

我希望标题单元格中有两行（或多行）文本。我知道让文本在网格中可视地换行，但我不会总是有长文本，此外，换行的文本也不会以多行形式导出到 Excel 工作表。我希望换行符位于文本中的特定位置，无论是在网格中还是在导出的 Excel 工作表中。

例如，在我提供的示例中，我希望能够在导出期间去除<br> html，并让导出创建一个多行标题。

如果我有以下剑道网格标题：

我希望 excel 导出看起来像这样：

而是输出<br>：

这里是http://plnkr.co/edit/v3TYgA?p=preview

Plunker 代码

<!DOCTYPE html>
<html>

<head>
  <base href="http://demos.telerik.com/kendo-ui/grid/excel-export">

  <title></title>
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common-material.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.material.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.material.min.css" />

  <script src="http://cdn.kendostatic.com/2015.1.318/js/jquery.min.js"></script>
  <script src="http://cdn.kendostatic.com/2015.1.318/js/jszip.min.js"></script>
  <script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>

  <link rel="stylesheet" href="style.css" type="text/css" />
    <style>
    html {
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
    }
    .k-grid-header .k-header {
      white-space: normal !important;
    }
  </style>
</head>

<body>
  <div id="example">
    <div id="grid" style="width: 900px"></div>
    <script>
      $("#grid").kendoGrid({
        toolbar: ["excel"],
        excel: {
          fileName: "Kendo UI Grid Export.xlsx",
          proxyURL: "http://demos.telerik.com/kendo-ui/service/export",
          filterable: true
        },
        excelExport: (e) => {
        //let width for exported columns auto set
        e.workbook.sheets[0].columns.forEach((col) => {
                col.autoWidth = true;
            });

        },
        dataSource: {
          type: "odata",
          transport: {
            read: "http://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
        },
        sortable: true,
        pageable: true,
        columns: [ {
          width: "35%",
          field: "UnitPrice",
          title: "Unit Price and some very loooong text that will make this line wrap. Not what I am looking for. Plus it doesn't export in multilines either.",
        }, {
          width: "30%",
          field: "UnitsOnOrder",
          title: "Units On Order"
        }, {
          width: "35%",
          field: "UnitsInStock",
          title: "Units In Stock <br> (Excludes foreign)"
        }]
      });

    </script>
  </div>


</body>

</html>

【问题讨论】：

我删除了我的答案，指出使用标题模板，因为它不适合你。也许是
您可以尝试使用另一种方式来添加中断，也许是具有 clear-both 样式的
。我不确定它会起作用。

标签： angularjs kendo-ui kendo-grid export-to-excel

【解决方案1】：

也许使用标题模板会得到更好的结果：

columns:[{
            width: "35%",
            field: "UnitsInStock",
            title: "Units In Stock ",
            headerTemplate: "Units In Stock <br> (Excludes foreign)"   
        }]

【讨论】：

谢谢。我试过headerTemplate。在尝试创建多行时没有区别。导出的工作表仍然没有多行。

【解决方案2】：

如果您希望“<br/>”标签在 Kendo Grid 中像 HTML 一样工作/执行，您需要使用“column.encoded”属性。官方文档：https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.encoded

页面上还有一个 DOJO 链接，这是一个很好的例子。

【讨论】：