Kendo 网格如何自动调整 excel 导出行高的大小？

Question

我有一个自定义 excel 输出 class，我用它来解析网格，并且在某些情况下用模板数据替换网格中的数据。在这个特定的例子中，我想要输出的数据是多行的。我已经做到了这一点，但是导出的 sheet 高了一行，所以您在现场看不到第二到第七行。期望的结果：

实际结果：

这是我的代码的相关部分。这是应用模板和条带的解析循环 html，但首先添加换行符。

if (me.ColumnTemplates && $.isArray(me.ColumnTemplates)) {
   for (let c = 0; c < me.ColumnTemplates.length; c++) {
       let ct = me.ColumnTemplates[c];
       if (ct.template(dr).includes("</br>")) {
           sheet.rows[r + 1].cells[ct.cellIndex - 1].wrap = true;
       }
       me.elem.innerHTML = ct.template(dr).replace(/<\/br>/g, "\n");
       sheet.rows[r + 1].cells[ct.cellIndex - 1].value = me.elem.textContent || me.elem.innerText || "";
    }
}

如有任何帮助，我们将不胜感激。我想有一个设置使这个 "just work" 或者有一种方法来计算所需的高度并手动设置它。哪个都可以。

Answer 1

我不知道自动调整大小的方法，但您可以通过 sheets.rows.height:

设置行高

<script>
    var workbook = new kendo.ooxml.Workbook({
      sheets: [{
          rows: [{
              cells: [{ value: "this row is 100px high" }],
              height: 100
          }, {
              cells: [{ value: "this row is 200px high" }],
              height: 200
          }]
      }]
    });
</script>

example found here

更新您的代码以利用模板中的每个代码 html 您可以执行如下操作：

if (me.ColumnTemplates && $.isArray(me.ColumnTemplates)) {
   for (let c = 0; c < me.ColumnTemplates.length; c++) {
       let ct = me.ColumnTemplates[c];
       if (ct.template(dr).includes("</br>")) {
           sheet.rows[r + 1].cells[ct.cellIndex - 1].wrap = true;
          
           sheet.rows[r + 1].height = (ct.template(dr).match(/<\/br>/g) || []).length * 20 + 20; //20 was default row height.
       }
       me.elem.innerHTML = ct.template(dr).replace(/<\/br>/g, "\n");
       sheet.rows[r + 1].cells[ct.cellIndex - 1].value = me.elem.textContent || me.elem.innerText || "";
    }
}

Answer 2

将列宽设置为自动

Solution 1 When kendo grid bound to data source in JavaScript/jQuery

excelExport: function(e) {
      var columns = e.workbook.sheets[0].columns;
      columns.forEach(function(column){
        // also delete the width if it is set
        delete column.width;
        column.autoWidth = true;
      });
    }

more details

Solution 2 When kendo grid is taking data source from action controller not bound to data source in jQuery then add event to call a JavaScript function on excel export

 function exportToExcelSheetColumnWidthChange(e) {
    var columns = e.workbook.sheets[0].columns;
    columns.forEach(function (column) {
        delete column.width;
        column.autoWidth = true;
    });
};

将事件添加到 kendo 网格控件

.Events(e => e.ExcelExport("exportToExcelSheetColumnWidthChange"))

Kendo 网格如何自动调整 excel 导出行高的大小？

Kendo grid how do i auto-size an excel export row height?

excel

kendo-ui

kendo-grid