Tabulator 和 SheetJS - 分组列标题在下载时未正确显示

Question

当我下载 xlsx 文件时，列 'Progress' 的标题位于第一个合并列 'Name' 的后面，我尝试了所有我能找到的方法，但没有成功。有人对此有解决方案吗？已经在 Tabulator 的 Github 上询问过，但他们关闭了它，并建议我应该在这里询问 - 也会在 SheetJS Github 上询问，但如果有人以前遇到过同样的问题并找到了解决方案，那将是真的有帮助。

工作fiddle： https://jsfiddle.net/millamanjko/qxk4fbam/4/

var tabledata = [{
    id: 1,
    name: "Billy Bob",
    progress: 12,
    gender: "male",
    rating: 95,
    col: "red",
    dob: "14/05/2010"
  },
  {
    id: 2,
    name: "Jenny Jane",
    progress: 42,
    gender: "female",
    rating: 142,
    col: "blue",
    dob: "30/07/1954"
  },
  {
    id: 3,
    name: "Steve McAlistaire",
    progress: 35,
    gender: "male",
    rating: 176,
    col: "green",
    dob: "04/11/1982"
  },
];

var table1 = new Tabulator("#example-table1", {
  data: tabledata,
  downloadConfig: {
    columnGroups: true, //include column groups in column headers for download
  },
  columns: [{
      title: "Name",
      downloadTitle: "Name-download",
      field: "name",
      width: 160
    },
    { //create column group
      title: "Work Info",
      columns: [{
          title: "Progress",
          field: "progress",
          align: "right",
          sorter: "number",
          width: 100
        },
        {
          title: "Rating",
          field: "rating",
          align: "center",
          width: 80
        },
      ],
    },
    { //create column group
      title: "Personal Info",
      columns: [{
          title: "Gender",
          field: "gender",
          width: 90
        },
        {
          title: "Favourite Color",
          field: "col",
          width: 140
        },
        {
          title: "Date Of Birth",
          field: "dob",
          align: "center",
          sorter: "date",
          width: 130
        },
      ],
    },
  ],
});


$("#download-xlsx1").click(function() {
  table1.download("xlsx", "data.xlsx", {
    sheetName: "My Data"
  });
});

<script src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/js/tabulator.min.js"></script>


<button id="download-xlsx1">download xlsx file</button>
<div id="example-table1"></div>

Answer 1

以防万一其他人可能仍然需要我找到的解决方案，添加 documentProcessing 函数我可以编辑单元格的内容并更正行为：

https://jsfiddle.net/millamanjko/qxk4fbam/54

$("#download-xlsx1").click(function() {
  table1.download("xlsx", "data.xlsx", {
    documentProcessing: function(workbook) {
      //workbook - sheetJS workbook object

      var ws_name = workbook.SheetNames[0];
      var ws = workbook.Sheets[ws_name];

      // Removes the text from cell A2
      ws["A2"] = {
        t: 's', // <-- t: 's' indicates the cell is a text cell
        v: "" // <-- v holds the value
      };

      // Changes the text from cell B2
      ws["B2"] = {
        t: 's', // <-- t: 's' indicates the cell is a text cell
        v: "Progress" // <-- v holds the value
      };

      return workbook;
    },
  });
});

Tabulator 和 SheetJS - 分组列标题在下载时未正确显示

Tabulator & SheetJS - Grouped column title not displaying correctly on download

download

xlsx

sheetjs

tabulator