找回密码
 立即注册

QQ登录

只需一步,快速开始

前端小菜鸟

初级会员

24

主题

88

帖子

266

积分

初级会员

积分
266
前端小菜鸟
初级会员   /  发表于:2024-6-3 15:40  /   查看:1443  /  回复:3
10金币
本帖最后由 前端小菜鸟 于 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





最佳答案

查看完整内容

看上去应该是您原本表格中就设置了冻结列,rowHeadersAsFrozenColumns又转换成了冻结列,导致两个冲突了。按您的需求分析,只需要设置columnHeadersAsFrozenRows为true就行了,不需要设置rowHeadersAsFrozenColumns

3 个回复

倒序浏览
最佳答案
最佳答案
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2024-6-3 15:40:58
来自 2#
看上去应该是您原本表格中就设置了冻结列,rowHeadersAsFrozenColumns又转换成了冻结列,导致两个冲突了。按您的需求分析,只需要设置columnHeadersAsFrozenRows为true就行了,不需要设置rowHeadersAsFrozenColumns
回复 使用道具 举报
前端小菜鸟
初级会员   /  发表于:2024-6-4 10:42:46
3#
Clark.Pan 发表于 2024-6-3 18:27
看上去应该是您原本表格中就设置了冻结列,rowHeadersAsFrozenColumns又转换成了冻结列,导致两个冲突了。 ...

把  
// rowHeadersAsFrozenColumns: true, // 将行头转换为冻结列序列化
注释上解决了这个问题
回复 使用道具 举报
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2024-6-4 11:02:23
4#
好的,那就结贴了,有什么问题欢迎另开新帖进行询问。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部