找回密码
 立即注册

QQ登录

只需一步,快速开始

Winny

超级版主

141

主题

258

帖子

1667

积分

超级版主

Rank: 8Rank: 8

积分
1667
Winny
超级版主   /  发表于:2022-2-8 17:03  /   查看:3369  /  回复:0
本帖最后由 Winny 于 2022-2-8 17:03 编辑

SpreadJS从V12之后,增加了对富文本的支持,不仅可以导入导出Excel中的富文本内容,也可以通过API的像是设置富文本。富文本的支持很好的解决了文档中上下标的问题及单元格导出PDF时,特殊字符乱码的问题。
但在当前的电子文档中,不少文档开始应用一些好看实用的图标字体,以阿里的iconfont为例,该网站是阿里打造的矢量图标管理、交流平台,设计师将图标上传到iconfont平台,用户可以自定义下载多种格式的icon,平台也可以将图标转换为字体,便于前端工程师自由调整和调用。
在一些特殊行业中,往往需要将某些特殊符号插入到单元格当中,在SpreadJS中插入这些特殊符号可以参考文章SpreadJS通过自定义字体解决文档中特殊字符的问题。本文侧重于介绍如何将iconfont中自己喜欢的一些图标插入到SpreadJS单元格中。
step1: 创建自己需要的图标字符集;
image.png980603637.png
登录iconfont,在iconfont上挑选自己想要的图标添加到右上方购物车中(鼠标悬浮在图标上会出现加入购物车的提示浮层)。

step2: 将自己选中的字符集下载到本地;
image.png814737548.png
下载完成后的目录结构如下图所示:
image.png604429015.png
文件中提供的demo_index.html是在网站上使用该字体的一些介绍说明,感兴趣的同学可以仔细地阅读一下这部分。iconfont.ttf是这些图标对应的字体文件,我们在SpreadJS中也主要使用的是这个字体文件。以上两步更多的是iconfont的使用,如果有什么不了解的自行百度即可。

step3:创建包含在线编辑器的工程;
使用自己熟悉的方式创建一个包含编辑器的工程。

step4: 将下载好的图标字体中的ttf文件和css引用到项目当中;
image.png811565246.png
css可以结合自己的业务在定义字体时做一些微调。

step4:创建编辑器并在编辑器中增加插入特殊字符的菜单项;首先,需要在编辑器的ribbon中加入特殊字符集的操作组,核心代码如下:
  1. var designer = new GC.Spread.Sheets.Designer.Designer("gc-designer-container");
  2.         var config = GC.Spread.Sheets.Designer.DefaultConfig;
  3.         // 插入tab添加插入特殊字符
  4.         var fontIconConfig = {
  5.             "label": "字符集",
  6.             commandGroup: {
  7.                 "commands": [
  8.                     "setFontIcon",
  9.                 ]
  10.             }
  11.         };
  12.         config.ribbon[1].buttonGroups.splice(config.ribbon[1].buttonGroups.length - 1, 0, fontIconConfig)
复制代码
接下来设置对应的操作特殊字符的菜单项,并编写setFontIcon命令,关于自定义编辑器添加操作项可以参考自定义编辑器汇总,本帖不做详细介绍,核心的代码如下:
  1. config.commandMap = {}
  2.         var fontIconCammands = {
  3.             "setFontIcon": {
  4.                 text: "特殊字符",
  5.                 title: "插入特殊字符",
  6.                 type: "dropdown",
  7.                 bigButton: "=ribbonHeight>toolbarHeight",
  8.                 iconClass: "ribbon-button-fontIcon",
  9.                 commandName: "setFontIcon",
  10.                 direction: "=IF(ribbonHeight<toolbarHeight,"horizontal","vertical")",
  11.                 dropdownList: [
  12.                     {
  13.                         groupName: "Spring",
  14.                         groupItems: [{
  15.                             iconClass: "iconfont icon-chunlianer",
  16.                             iconHeight: 20,
  17.                             iconWidth: 14,
  18.                             value: "iconfont-" + String.fromCharCode(parseInt("e6b5", 16))
  19.                         }, {
  20.                             iconClass: "iconfont icon-denglongyi",
  21.                             iconHeight: 20,
  22.                             iconWidth: 14,
  23.                             value: "iconfont-" + String.fromCharCode(parseInt("e6b7", 16))
  24.                         }
  25.                         ],
  26.                     },
  27.                 ],
  28.                 execute: async (context, selectValue) => {
  29.                     if (selectValue != null && selectValue != undefined) {
  30.                         let newFont = selectValue.split("-")[0],
  31.                             content = selectValue.split("-")[1];
  32.                         let sheet = context.Spread.getActiveSheet(),
  33.                             row = sheet.getActiveRowIndex(),
  34.                             col = sheet.getActiveColumnIndex(),
  35.                             cell = sheet.getCell(row, col),
  36.                             font = cell.font();
  37.                         var span = document.createElement("span");
  38.                         span.style.font = font;
  39.                         span.style.fontFamily = newFont;
  40.                         var iconFont = span.style.font;

  41.                         let value = sheet.getValue(row, col, GC.Spread.Sheets.SheetArea.viewport, GC.Spread.Sheets.ValueType.richText);
  42.                         if (value === null || value === undefined) {
  43.                             value = { richText: [{ style: { font: iconFont }, text: content }] };
  44.                         }else if (value instanceof Object && value.richText) {
  45.                             let rt = value.richText;
  46.                             if (rt.length > 1 && rt[rt.length - 1].style) {
  47.                                 let exStyle = JSON.parse(JSON.stringify(rt[rt.length - 1].style));
  48.                                 if (rt[rt.length - 1].style.font) {
  49.                                     var span = document.createElement("span");
  50.                                     span.style.font = rt[rt.length - 1].style.font;
  51.                                     span.style.fontFamily = newFont;
  52.                                     exStyle.font = span.style.font;
  53.                                 }
  54.                                 else {
  55.                                     exStyle.font = iconFont;
  56.                                 }
  57.                                 rt.push({ style: exStyle, text: content });
  58.                             }
  59.                             else {
  60.                                 rt.push({ style: { font: iconFont }, text: content });
  61.                             }
  62.                         }
  63.                         else {
  64.                             value = {
  65.                                 richText: [
  66.                                     { style: { font: font }, text: value },
  67.                                     { style: { font: iconFont }, text: content }]
  68.                             };
  69.                         }

  70.                         context.Spread.commandManager().execute({ cmd: "editCell", sheetName: sheet.name(), row: row, col: col, newValue: value });
  71.                     }
  72.                 },
  73.                 getState: (context) => {
  74.                     return "";
  75.                 }

  76.             }
  77.         }

  78.         Object.assign(config.commandMap, fontIconCammands)
  79.         designer.setConfig(config)
复制代码

通过上述几步操作就可实现在SpreadJS编辑器中插入图表字符的需求了,具体的实现效果如下:
insertSymbol.gif229765013.png

测试项目见文章末尾。


图标字体.zip

14.63 KB, 下载次数: 189

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部