单元格字体样式

问题：如何在SpreadJS中获取单元格字体样式

背景：

在业务中，需要对于个别单元格获取其背景色，字体大小，字体类型等信息并存储。以便后续在其它文件中显示该单元格值的时候，同时能够根据存储下的字体、背景色、对齐方式等其它信息，还原单元格样式。

解决方案：

在css当中，font信息属于叠加属性，可以参考Style font属性。通常该复合属性就可以完整的还原字体样式。

使用SpreadJS的font()方法即可以获取该复合属性。

但是，如果需要获取符合属性的某一个，例如字体类型，字体大小等等，就需要创建一个div，并借助js的相关方法来获取。

详细的demo可以参考：SpreadJS获取单元格字体样式

问题：如何设置单元格中部分字体的样式？

背景：

在日常的业务场景中，想要否实现对一个单元格中的指定部分内容加粗或者修改字体颜色，但是直接修改的话会修改整个单元格的加粗和字体颜色。

需要一种解决方案，能够修改单元格中部分字体的颜色。

解决方案：

目前暂时不支持对单元格的部分内容进行样式调整，想要实现这个需求，目前可以通过富文本来实现。

富文本功能不仅适用于修改字体的颜色，有关字体的其他属性，例如字体大小，上下标，粗斜体，字体种类等，均可以通过富文本功能实现对于同一个单元格内不同文字的精确控制。

参考链接：富文本

问题：如何在SpreadJS中仅修改字体样式

背景：

在部分场景下可能会存在仅修改字体样式的需求，但是由于style的font属性中不止存在字体，还可能存在加粗或者斜体等属性，因此想要通过代码修改一个区域的字体样式就不能使用传统的方法来进行修改。

解决方案：

可以通过遍历的方法去完成，参考以下代码：

const handleFontFamily = (val, sheet) => {
  let sel = sheet.getSelections()[0];

  for (let i = sel.row; i < sel.row + sel.rowCount; i++) {
    for (let j = sel.col; j < sel.col + sel.colCount; j++) {
      let style = sheet.getStyle(i, j);
      if (style && style.font) {
        let array = style.font.split(" ")
        array[array.length - 1] = val;
        style.font = array.toString().replaceAll(',', ' ');
        
        sheet.setStyle(i, j, style, GC.Spread.Sheets.SheetArea.viewport);
      } else {
        style = new GC.Spread.Sheets.Style();
        style.font = "11pt " + val;
        sheet.setStyle(i, j, style, GC.Spread.Sheets.SheetArea.viewport);

      }
    }
  }
};

上述代码会对没有样式的单元格直接覆盖font，而如果有font属性，就将font属性中的值提取出来，根据特定的规则去替换为用户想要的结果。

如果有其他需求，也可以针对上述代码进行特定位置的修改。

作者: GrapeCity China | 审核：Clark.Pan | 更新时间：2023.09.26