14版，复杂表头不能正常导出问题

Clark.Pan

本帖最后由前端小菜鸟于 2024-6-3 16:02 编辑

我画了一个相对复杂的表头的excel
1717401206824.png922323913.png

this.sheet.setDataSource([]);
this.sheet.setRowCount(2,GC.Spread.Sheets.SheetArea.colHeader)
this.sheet.addColumns(this.sheet.getColumnCount(this.SheetArea.viewport), 1);
this.sheet.setValue(0, this.sheet.getColumnCount(this.SheetArea.viewport) - 1, '编码', GC.Spread.Sheets.SheetArea.colHeader);
this.sheet.addSpan(0, 0, 2, 1, GC.Spread.Sheets.SheetArea.colHeader);
this.sheet.setColumnWidth(this.sheet.getColumnCount(this.SheetArea.viewport) - 1, 100);
this.sheet.addColumns(this.sheet.getColumnCount(this.SheetArea.viewport), 1);
this.sheet.setValue(0, this.sheet.getColumnCount(this.SheetArea.viewport) - 1, '名称', GC.Spread.Sheets.SheetArea.colHeader);
this.sheet.addSpan(0, 1, 2, 1, GC.Spread.Sheets.SheetArea.colHeader);
this.sheet.setColumnWidth(this.sheet.getColumnCount(this.SheetArea.viewport) - 1, 130);
this.sheet.addColumns(this.sheet.getColumnCount(this.SheetArea.viewport), 1);
this.sheet.setValue(0, this.sheet.getColumnCount(this.SheetArea.viewport) - 1, '方案', GC.Spread.Sheets.SheetArea.colHeader);
this.sheet.addSpan(0, 2, 2, 1, GC.Spread.Sheets.SheetArea.colHeader);
this.sheet.setColumnWidth(this.sheet.getColumnCount(this.SheetArea.viewport) - 1, 130);
this.sheet.frozenColumnCount(3);
if(this.tab.nzSelectedIndex === 1){
   this.sheet.addColumns(this.sheet.getColumnCount(this.SheetArea.viewport), 1);
   this.sheet.setValue(0, this.sheet.getColumnCount(this.SheetArea.viewport) - 1, '方案量', GC.Spread.Sheets.SheetArea.colHeader);
   this.sheet.addSpan(0, 3, 2, 1, GC.Spread.Sheets.SheetArea.colHeader);
   this.sheet.setColumnWidth(this.sheet.getColumnCount(this.SheetArea.viewport) - 1, 130);
   this.sheet.frozenColumnCount(4);
}
this.sheet.options.protectionOptions = this.option;
this.sheet.options.clipBoardOptions = GC.Spread.Sheets.ClipboardPasteOptions.values;
this.sheet.options.isProtected = true;

前几列表头是固定的，后面的表头是后台取的

  private setHeader(sheet: any) {
for (let index = 0; index < this.listHeadData.length; index++) {
   sheet.addColumns(sheet.getColumnCount(this.SheetArea.viewport), 1);
   sheet.setValue(0, sheet.getColumnCount(this.SheetArea.viewport) - 1, this.listHeadData[index].ucode, GC.Spread.Sheets.SheetArea.colHeader);
   sheet.setValue(1, sheet.getColumnCount(this.SheetArea.viewport) - 1, this.listHeadData[index].uname, GC.Spread.Sheets.SheetArea.colHeader);
   sheet.setColumnWidth(sheet.getColumnCount(this.SheetArea.viewport) - 1, 150);
}
  }

现在我做导出

  exports() {
const serializationOption = {
   ignoreFormula: false, // 如果设置为true则忽略公式，不会序列化公式，只会将公式计算的结果序列化到JSON中。
   ignoreStyle: false, // 如果设置为true则忽略样式，所有style中的属性将不会序列化到JSON中
   rowHeadersAsFrozenColumns: true, // 将行头转换为冻结列序列化
   columnHeadersAsFrozenRows: true, // 将列头转换为冻结行序列化
   includeBindingSource: true, // 将数据绑定的数据源也序列化到json中
   saveAsView: true
};
const  json = this.spread.toJSON(serializationOption);
let excelIo = new Excel.IO();
excelIo.save(json, (blob) => {
   // 创建一个下载链接并模拟点击下载
   const downloadUrl = window.URL.createObjectURL(blob);
   const a = document.createElement('a');
   a.href = downloadUrl;
   a.download = '公用工程.xlsx'; // 设置下载文件的名称
   document.body.appendChild(a);
   a.click();

   // 清理资源
   window.URL.revokeObjectURL(downloadUrl);
   document.body.removeChild(a);
}, (e) => {
   this.msg.error(e)
});
  }
}

不加 rowHeadersAsFrozenColumns: true, // 将行头转换为冻结列序列化
   columnHeadersAsFrozenRows: true, // 将列头转换为冻结行序列化
两个设置的时候，导出时不能导出表头，只有表体
加上的时候表显示混乱，会缺少列而且表头和列不能对其，表头也缺少表体也缺少，只能显示三列。
1717401758656.png439288024.png