装饰图标

装饰图标是一组自定义的图标,可以嵌入单元格中,也可以在单元格外。

这些图标被GC.Spread.Sheets.Style用于装饰单元格。所以它可以在GC.Spread.Sheets.Style的装饰选项中为图标选项指定src、宽度、高度和位置。此外,单元格对齐方式可以影响图标在垂直方向上的对齐。 定义图标: GC.Spread.Sheets.IIcon的描述: 参数 类型 默认值 描述 src string 图标路径,必填,可以是 url 或 base64 width number 12 绘制的宽度,可选 height number 12 绘制的高度,可选 position GC.Spread.Sheets.IconPosition GC.Spread.Sheets.IconPosition.left 绘制的位置,可选 对GC.Spread.Sheets.IconPosition的描述: 参数 描述 left 在单元格的左侧 right 在单元格的右侧 leftOfText 在文本的左侧 rightOfText 在文本的右侧 outsideLeft 在单元格的左外侧 outsideRight 在单元格的右外侧 比如说:
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); setLayout(sheet); var style; function setIcon (row, col, style) { style.hAlign = GC.Spread.Sheets.HorizontalAlign.center; style.vAlign = GC.Spread.Sheets.VerticalAlign.center; sheet.setStyle(row, col, style); sheet.setText(row, col, 'Cell Text'); sheet.getRange(row, col, 1, 1) .setBorder(new GC.Spread.Sheets.LineBorder("green", GC.Spread.Sheets.LineStyle.dashed) , { outline: true }); }; //left side in the cell style = new GC.Spread.Sheets.Style(); style.decoration = { icons: [ { src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcgOUg1TDUgNS45NjA0NmUtMDhIN0w3IDlaTTYgMTBDNi41NTIyOCAxMCA3IDEwLjQ0NzcgNyAxMUM3IDExLjU1MjMgNi41NTIyOCAxMiA2IDEyQzUuNDQ3NzIgMTIgNSAxMS41NTIzIDUgMTFDNSAxMC40NDc3IDUuNDQ3NzIgMTAgNiAxMFoiIGZpbGw9IiNFNjUyNDkiLz4KPC9zdmc+Cg==', position: GC.Spread.Sheets.IconPosition.left } ] }; setIcon(1, 1, style); //left side of the text style = new GC.Spread.Sheets.Style(); style.decoration = { icons: [ { src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABPklEQVR4Ae2YAWYDQRSGV6BUabFQiKE28wA9Qo7Qo/QIBRTQGyQESlUWURRSVdZssL3B5gZJT/A6A8Eq8qck//I+foDxvjWzfi8zuhiGYRg6yZxOs3lMG6N7ZsI0/AYYnEoiCZT44EQSwNfnlEgDkKSNmacrDQuQZQNIUApoepeQAGHavguoCewyG6i+5apfN6q1HDm+0ZWM/yewHKbDTpswujtM4PUiHUAgIO1hAu/XHAIpjThc4NP1XKAWmuBX6PmMSeADFygviQT8Ey6wyHkEVv4eF1gOiQRkjAtUBY9A464wgdmAZ/gga7xKvJzT/4F20D/gIA+IAEGFAIpcgr5C1MUtLsBcIbpQV4jgv/fZzG15K4RM8dXiIud/wB0BF7OlqxDBl9CGOqaMWZ+8QlTFj1ajx7/qg2EYhmH8AtrSH2QJmV2LAAAAAElFTkSuQmCC', position: GC.Spread.Sheets.IconPosition.leftOfText } ] }; setIcon(4, 1, style); //outside left of the cell style = new GC.Spread.Sheets.Style(); style.decoration = { icons: [ { src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+dW5kbzwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJ1bmRvIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNNi43NDY0OTIwNSwzLjc5NjM1NTEyIEM4LjUzNjk1MDQyLDMuNzk2MzU1MTIgMTAsNS4xNzQ5NDI4NyAxMCw2Ljg5NzczMTcxIEMxMCw4LjYyMDUyMDU0IDguNTM2OTUwNDIsMTAgNi43NDY0OTIwNSwxMCBMNS4zMzQ4OTI0MiwxMCBDNS4xOTczODA3MywxMCA1LjExMTMxODk5LDkuOTAxOTExNjEgNS4xMTEzMTg5OSw5Ljc2OTkzODE0IEw1LjExMTMxODk5LDkuMjQ0NzE5MzkgQzUuMTExMzE4OTksOS4xMTM2Mzc2MyA1LjIxNDIxODksOC45OTg2MDY3IDUuMzUyNjY2MDQsOC45OTg2MDY3IEw2Ljc0NzQyNzUsOC45OTg2MDY3IEM3Ljk3MDA2NTQ4LDguOTk4NjA2NyA4Ljk1MTM1NjQxLDguMDYzMjAwMTMgOC45NTEzNTY0MSw2Ljg5NzczMTcxIEM4Ljk1MTM1NjQxLDUuNzMyMjYzMjggNy45NjkxMzAwMyw0Ljc5Nzc0ODQzIDYuNzQ2NDkyMDUsNC43OTc3NDg0MyBMNC4zNTM2MDE1LDQuNzk3NzQ4NDMgQzQuMzUzNjAxNSw0Ljc5Nzc0ODQzIDQuMjE2MDg5OCw0Ljc5Nzc0ODQzIDQuMTY0NjM5ODUsNC44MTM3OTkyNSBDNC4wMjcxMjgxNiw0Ljg3OTc4NTk5IDQuMDYxNzM5OTQsNC45Nzc4NzQzOCA0LjE4MTQ3ODAyLDUuMDkyOTA1MzEgTDUuMDI1MjU3MjUsNS44OTcyMzAxMiBDNS4xMjgxNTcxNiw1Ljk5NTMxODUxIDUuMTExMzE4OTksNi4xNDMzNDI4MSA1LjAwODQxOTA4LDYuMjQxNDMxMiBMNC42Mjk1NjAzNCw2LjYwMjU3NDgyIEM0LjUyNjY2MDQzLDYuNzAwNjYzMjEgNC40MDU5ODY5LDYuNzAwNjYzMjEgNC4zMDIxNTE1NCw2LjYxODYyNTY1IEwyLjA2NDU0NjMsNC40ODU2NDkgQzEuOTc4NDg0NTcsNC40MDM2MTE0NCAxLjk3ODQ4NDU3LDQuMjcyNTI5NjggMi4wNjQ1NDYzLDQuMTkwNDkyMTEgTDQuMjg1MzEzMzgsMi4wNzM1NjYyOSBDNC4zODgyMTMyOCwxLjk3NTQ3NzkgNC41NjAzMzY3NiwxLjk3NTQ3NzkgNC42NDYzOTg1LDIuMDczNTY2MjkgTDUuMDA3NDgzNjMsMi40MTc3NjczNyBDNS4xMTAzODM1NCwyLjUxNTg1NTc3IDUuMTEwMzgzNTQsMi42Nzk5MzA4OSA1LjAwNzQ4MzYzLDIuNzYxOTY4NDYgTDQuMTYzNzA0NCwzLjU2NjI5MzI2IEM0LjA2MDgwNDQ5LDMuNjY0MzgxNjUgNC4wNjA4MDQ0OSwzLjc3OTQxMjU4IDQuMjMyOTI3OTcsMy43Nzk0MTI1OCBMNC4zNTM2MDE1LDMuNzc5NDEyNTggTDYuNzQ2NDkyMDUsMy43OTYzNTUxMiBaIiBmaWxsPSIjNkU2RTZFIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+', position: GC.Spread.Sheets.IconPosition.outsideLeft } ] }; setIcon(7, 1, style); //multiple icons style = new GC.Spread.Sheets.Style(); style.decoration = { icons: [ { src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+dW5kbzwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJ1bmRvIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNNi43NDY0OTIwNSwzLjc5NjM1NTEyIEM4LjUzNjk1MDQyLDMuNzk2MzU1MTIgMTAsNS4xNzQ5NDI4NyAxMCw2Ljg5NzczMTcxIEMxMCw4LjYyMDUyMDU0IDguNTM2OTUwNDIsMTAgNi43NDY0OTIwNSwxMCBMNS4zMzQ4OTI0MiwxMCBDNS4xOTczODA3MywxMCA1LjExMTMxODk5LDkuOTAxOTExNjEgNS4xMTEzMTg5OSw5Ljc2OTkzODE0IEw1LjExMTMxODk5LDkuMjQ0NzE5MzkgQzUuMTExMzE4OTksOS4xMTM2Mzc2MyA1LjIxNDIxODksOC45OTg2MDY3IDUuMzUyNjY2MDQsOC45OTg2MDY3IEw2Ljc0NzQyNzUsOC45OTg2MDY3IEM3Ljk3MDA2NTQ4LDguOTk4NjA2NyA4Ljk1MTM1NjQxLDguMDYzMjAwMTMgOC45NTEzNTY0MSw2Ljg5NzczMTcxIEM4Ljk1MTM1NjQxLDUuNzMyMjYzMjggNy45NjkxMzAwMyw0Ljc5Nzc0ODQzIDYuNzQ2NDkyMDUsNC43OTc3NDg0MyBMNC4zNTM2MDE1LDQuNzk3NzQ4NDMgQzQuMzUzNjAxNSw0Ljc5Nzc0ODQzIDQuMjE2MDg5OCw0Ljc5Nzc0ODQzIDQuMTY0NjM5ODUsNC44MTM3OTkyNSBDNC4wMjcxMjgxNiw0Ljg3OTc4NTk5IDQuMDYxNzM5OTQsNC45Nzc4NzQzOCA0LjE4MTQ3ODAyLDUuMDkyOTA1MzEgTDUuMDI1MjU3MjUsNS44OTcyMzAxMiBDNS4xMjgxNTcxNiw1Ljk5NTMxODUxIDUuMTExMzE4OTksNi4xNDMzNDI4MSA1LjAwODQxOTA4LDYuMjQxNDMxMiBMNC42Mjk1NjAzNCw2LjYwMjU3NDgyIEM0LjUyNjY2MDQzLDYuNzAwNjYzMjEgNC40MDU5ODY5LDYuNzAwNjYzMjEgNC4zMDIxNTE1NCw2LjYxODYyNTY1IEwyLjA2NDU0NjMsNC40ODU2NDkgQzEuOTc4NDg0NTcsNC40MDM2MTE0NCAxLjk3ODQ4NDU3LDQuMjcyNTI5NjggMi4wNjQ1NDYzLDQuMTkwNDkyMTEgTDQuMjg1MzEzMzgsMi4wNzM1NjYyOSBDNC4zODgyMTMyOCwxLjk3NTQ3NzkgNC41NjAzMzY3NiwxLjk3NTQ3NzkgNC42NDYzOTg1LDIuMDczNTY2MjkgTDUuMDA3NDgzNjMsMi40MTc3NjczNyBDNS4xMTAzODM1NCwyLjUxNTg1NTc3IDUuMTEwMzgzNTQsMi42Nzk5MzA4OSA1LjAwNzQ4MzYzLDIuNzYxOTY4NDYgTDQuMTYzNzA0NCwzLjU2NjI5MzI2IEM0LjA2MDgwNDQ5LDMuNjY0MzgxNjUgNC4wNjA4MDQ0OSwzLjc3OTQxMjU4IDQuMjMyOTI3OTcsMy43Nzk0MTI1OCBMNC4zNTM2MDE1LDMuNzc5NDEyNTggTDYuNzQ2NDkyMDUsMy43OTYzNTUxMiBaIiBmaWxsPSIjNkU2RTZFIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+', position: GC.Spread.Sheets.IconPosition.outsideLeft }, { src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcgOUg1TDUgNS45NjA0NmUtMDhIN0w3IDlaTTYgMTBDNi41NTIyOCAxMCA3IDEwLjQ0NzcgNyAxMUM3IDExLjU1MjMgNi41NTIyOCAxMiA2IDEyQzUuNDQ3NzIgMTIgNSAxMS41NTIzIDUgMTFDNSAxMC40NDc3IDUuNDQ3NzIgMTAgNiAxMFoiIGZpbGw9IiNFNjUyNDkiLz4KPC9zdmc+Cg==', position: GC.Spread.Sheets.IconPosition.left }, { src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABPklEQVR4Ae2YAWYDQRSGV6BUabFQiKE28wA9Qo7Qo/QIBRTQGyQESlUWURRSVdZssL3B5gZJT/A6A8Eq8qck//I+foDxvjWzfi8zuhiGYRg6yZxOs3lMG6N7ZsI0/AYYnEoiCZT44EQSwNfnlEgDkKSNmacrDQuQZQNIUApoepeQAGHavguoCewyG6i+5apfN6q1HDm+0ZWM/yewHKbDTpswujtM4PUiHUAgIO1hAu/XHAIpjThc4NP1XKAWmuBX6PmMSeADFygviQT8Ey6wyHkEVv4eF1gOiQRkjAtUBY9A464wgdmAZ/gga7xKvJzT/4F20D/gIA+IAEGFAIpcgr5C1MUtLsBcIbpQV4jgv/fZzG15K4RM8dXiIud/wB0BF7OlqxDBl9CGOqaMWZ+8QlTFj1ajx7/qg2EYhmH8AtrSH2QJmV2LAAAAAElFTkSuQmCC', position: GC.Spread.Sheets.IconPosition.leftOfText }, { src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+ZWxsaXBzaXM8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iZWxsaXBzaXMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik0yLDcgQzEuNDQ3NzE1MjUsNyAxLDYuNTUyMjg0NzUgMSw2IEMxLDUuNDQ3NzE1MjUgMS40NDc3MTUyNSw1IDIsNSBDMi41NTIyODQ3NSw1IDMsNS40NDc3MTUyNSAzLDYgQzMsNi41NTIyODQ3NSAyLjU1MjI4NDc1LDcgMiw3IFogTTYsNyBDNS40NDc3MTUyNSw3IDUsNi41NTIyODQ3NSA1LDYgQzUsNS40NDc3MTUyNSA1LjQ0NzcxNTI1LDUgNiw1IEM2LjU1MjI4NDc1LDUgNyw1LjQ0NzcxNTI1IDcsNiBDNyw2LjU1MjI4NDc1IDYuNTUyMjg0NzUsNyA2LDcgWiBNMTAsNyBDOS40NDc3MTUyNSw3IDksNi41NTIyODQ3NSA5LDYgQzksNS40NDc3MTUyNSA5LjQ0NzcxNTI1LDUgMTAsNSBDMTAuNTUyMjg0Nyw1IDExLDUuNDQ3NzE1MjUgMTEsNiBDMTEsNi41NTIyODQ3NSAxMC41NTIyODQ3LDcgMTAsNyBaIiBmaWxsPSIjNkU2RTZFIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==', position: GC.Spread.Sheets.IconPosition.rightOfText }, { src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+b2s8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0ib2siIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik01LjY3NjUyMjQsMTAgQzUuNjc2NTIyNCwxMCA2LjkxNzAzMjUzLDcuMzM0ODI5MDcgOC40MTk2ODA3OSw1LjMyNjE2ODAyIEM5LjU4MDA5Mzk2LDMuNzc2MzU0NDYgMTEsMi43MTg3NTQxMSAxMSwyLjcxODc1NDExIEwxMC41MTYxMDg0LDIgQzEwLjUxNjEwODQsMiA4Ljk2NzEyNTYsMi43MDIwNjg3NSA3LjU3NzY3MjIzLDQuMDUwMzc0NDYgQzYuMTY4MzYwMTEsNS40MTcyOTA3NiA1LjM0NDg4MTIxLDYuOTQ2NTczNSA1LjM0NDg4MTIxLDYuOTQ2NTczNSBMMy4yOTc0Mzg1Niw1LjAxMTcxMzA5IEwyLDYuNDYwMTI1OTcgTDUuNjc2NTE5ODEsOS45OTk5ODc0NyBMNS42NzY1MTk4MSw5Ljk5OTk4NzQ3IEw1LjY3NjUyMjQsMTAgWiIgaWQ9Ik9LIiBmaWxsPSIjNkU2RTZFIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+', position: GC.Spread.Sheets.IconPosition.right }, { src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+Y2xlYXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iY2xlYXIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGZpbGw9IiM2RTZFNkUiIGZpbGwtcnVsZT0ibm9uemVybyIgcG9pbnRzPSI4Ljg3NTQ2MzkgMyAxMCA0LjEyNDUzNjEgNy42MjQ1MzYxIDYuNSAxMCA4Ljg3NTQ2MzkgOC44NzU0NjM5IDEwIDYuNSA3LjYyNDUzNjEgNC4xMjQ1MzYxIDEwIDMgOC44NzU0NjM5IDUuMzc1NDYzOSA2LjUgMyA0LjEyNDUzNjEgNC4xMjQ1MzYxIDMgNi41IDUuMzc1NDYzOSI+PC9wb2x5Z29uPgogICAgPC9nPgo8L3N2Zz4=', position: GC.Spread.Sheets.IconPosition.right }, { src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+cmVkbzwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJyZWRvIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNNi43NDY0OTIwNSwzLjc5NjM1NTEyIEM4LjUzNjk1MDQyLDMuNzk2MzU1MTIgMTAsNS4xNzQ5NDI4NyAxMCw2Ljg5NzczMTcxIEMxMCw4LjYyMDUyMDU0IDguNTM2OTUwNDIsMTAgNi43NDY0OTIwNSwxMCBMNS4zMzQ4OTI0MiwxMCBDNS4xOTczODA3MywxMCA1LjExMTMxODk5LDkuOTAxOTExNjEgNS4xMTEzMTg5OSw5Ljc2OTkzODE0IEw1LjExMTMxODk5LDkuMjQ0NzE5MzkgQzUuMTExMzE4OTksOS4xMTM2Mzc2MyA1LjIxNDIxODksOC45OTg2MDY3IDUuMzUyNjY2MDQsOC45OTg2MDY3IEw2Ljc0NzQyNzUsOC45OTg2MDY3IEM3Ljk3MDA2NTQ4LDguOTk4NjA2NyA4Ljk1MTM1NjQxLDguMDYzMjAwMTMgOC45NTEzNTY0MSw2Ljg5NzczMTcxIEM4Ljk1MTM1NjQxLDUuNzMyMjYzMjggNy45NjkxMzAwMyw0Ljc5Nzc0ODQzIDYuNzQ2NDkyMDUsNC43OTc3NDg0MyBMNC4zNTM2MDE1LDQuNzk3NzQ4NDMgQzQuMzUzNjAxNSw0Ljc5Nzc0ODQzIDQuMjE2MDg5OCw0Ljc5Nzc0ODQzIDQuMTY0NjM5ODUsNC44MTM3OTkyNSBDNC4wMjcxMjgxNiw0Ljg3OTc4NTk5IDQuMDYxNzM5OTQsNC45Nzc4NzQzOCA0LjE4MTQ3ODAyLDUuMDkyOTA1MzEgTDUuMDI1MjU3MjUsNS44OTcyMzAxMiBDNS4xMjgxNTcxNiw1Ljk5NTMxODUxIDUuMTExMzE4OTksNi4xNDMzNDI4MSA1LjAwODQxOTA4LDYuMjQxNDMxMiBMNC42Mjk1NjAzNCw2LjYwMjU3NDgyIEM0LjUyNjY2MDQzLDYuNzAwNjYzMjEgNC40MDU5ODY5LDYuNzAwNjYzMjEgNC4zMDIxNTE1NCw2LjYxODYyNTY1IEwyLjA2NDU0NjMsNC40ODU2NDkgQzEuOTc4NDg0NTcsNC40MDM2MTE0NCAxLjk3ODQ4NDU3LDQuMjcyNTI5NjggMi4wNjQ1NDYzLDQuMTkwNDkyMTEgTDQuMjg1MzEzMzgsMi4wNzM1NjYyOSBDNC4zODgyMTMyOCwxLjk3NTQ3NzkgNC41NjAzMzY3NiwxLjk3NTQ3NzkgNC42NDYzOTg1LDIuMDczNTY2MjkgTDUuMDA3NDgzNjMsMi40MTc3NjczNyBDNS4xMTAzODM1NCwyLjUxNTg1NTc3IDUuMTEwMzgzNTQsMi42Nzk5MzA4OSA1LjAwNzQ4MzYzLDIuNzYxOTY4NDYgTDQuMTYzNzA0NCwzLjU2NjI5MzI2IEM0LjA2MDgwNDQ5LDMuNjY0MzgxNjUgNC4wNjA4MDQ0OSwzLjc3OTQxMjU4IDQuMjMyOTI3OTcsMy43Nzk0MTI1OCBMNC4zNTM2MDE1LDMuNzc5NDEyNTggTDYuNzQ2NDkyMDUsMy43OTYzNTUxMiBaIiBmaWxsPSIjNkU2RTZFIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMDAwMDAwLCA2LjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtNi4wMDAwMDAsIC02LjAwMDAwMCkgIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==', position: GC.Spread.Sheets.IconPosition.outsideRight } ] }; setIcon(10, 1, style); //right side in the cell style = new GC.Spread.Sheets.Style(); style.decoration = { icons: [ { src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+b2s8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0ib2siIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik01LjY3NjUyMjQsMTAgQzUuNjc2NTIyNCwxMCA2LjkxNzAzMjUzLDcuMzM0ODI5MDcgOC40MTk2ODA3OSw1LjMyNjE2ODAyIEM5LjU4MDA5Mzk2LDMuNzc2MzU0NDYgMTEsMi43MTg3NTQxMSAxMSwyLjcxODc1NDExIEwxMC41MTYxMDg0LDIgQzEwLjUxNjEwODQsMiA4Ljk2NzEyNTYsMi43MDIwNjg3NSA3LjU3NzY3MjIzLDQuMDUwMzc0NDYgQzYuMTY4MzYwMTEsNS40MTcyOTA3NiA1LjM0NDg4MTIxLDYuOTQ2NTczNSA1LjM0NDg4MTIxLDYuOTQ2NTczNSBMMy4yOTc0Mzg1Niw1LjAxMTcxMzA5IEwyLDYuNDYwMTI1OTcgTDUuNjc2NTE5ODEsOS45OTk5ODc0NyBMNS42NzY1MTk4MSw5Ljk5OTk4NzQ3IEw1LjY3NjUyMjQsMTAgWiIgaWQ9Ik9LIiBmaWxsPSIjNkU2RTZFIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+', position: GC.Spread.Sheets.IconPosition.right }, ] }; setIcon(1, 6, style); //right side of the text style = new GC.Spread.Sheets.Style(); style.decoration = { icons: [ { src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+ZWxsaXBzaXM8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iZWxsaXBzaXMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik0yLDcgQzEuNDQ3NzE1MjUsNyAxLDYuNTUyMjg0NzUgMSw2IEMxLDUuNDQ3NzE1MjUgMS40NDc3MTUyNSw1IDIsNSBDMi41NTIyODQ3NSw1IDMsNS40NDc3MTUyNSAzLDYgQzMsNi41NTIyODQ3NSAyLjU1MjI4NDc1LDcgMiw3IFogTTYsNyBDNS40NDc3MTUyNSw3IDUsNi41NTIyODQ3NSA1LDYgQzUsNS40NDc3MTUyNSA1LjQ0NzcxNTI1LDUgNiw1IEM2LjU1MjI4NDc1LDUgNyw1LjQ0NzcxNTI1IDcsNiBDNyw2LjU1MjI4NDc1IDYuNTUyMjg0NzUsNyA2LDcgWiBNMTAsNyBDOS40NDc3MTUyNSw3IDksNi41NTIyODQ3NSA5LDYgQzksNS40NDc3MTUyNSA5LjQ0NzcxNTI1LDUgMTAsNSBDMTAuNTUyMjg0Nyw1IDExLDUuNDQ3NzE1MjUgMTEsNiBDMTEsNi41NTIyODQ3NSAxMC41NTIyODQ3LDcgMTAsNyBaIiBmaWxsPSIjNkU2RTZFIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==', position: GC.Spread.Sheets.IconPosition.rightOfText }, ] }; setIcon(4, 6, style); //outside right of the cell style = new GC.Spread.Sheets.Style(); style.decoration = { icons: [ { src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+cmVkbzwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJyZWRvIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNNi43NDY0OTIwNSwzLjc5NjM1NTEyIEM4LjUzNjk1MDQyLDMuNzk2MzU1MTIgMTAsNS4xNzQ5NDI4NyAxMCw2Ljg5NzczMTcxIEMxMCw4LjYyMDUyMDU0IDguNTM2OTUwNDIsMTAgNi43NDY0OTIwNSwxMCBMNS4zMzQ4OTI0MiwxMCBDNS4xOTczODA3MywxMCA1LjExMTMxODk5LDkuOTAxOTExNjEgNS4xMTEzMTg5OSw5Ljc2OTkzODE0IEw1LjExMTMxODk5LDkuMjQ0NzE5MzkgQzUuMTExMzE4OTksOS4xMTM2Mzc2MyA1LjIxNDIxODksOC45OTg2MDY3IDUuMzUyNjY2MDQsOC45OTg2MDY3IEw2Ljc0NzQyNzUsOC45OTg2MDY3IEM3Ljk3MDA2NTQ4LDguOTk4NjA2NyA4Ljk1MTM1NjQxLDguMDYzMjAwMTMgOC45NTEzNTY0MSw2Ljg5NzczMTcxIEM4Ljk1MTM1NjQxLDUuNzMyMjYzMjggNy45NjkxMzAwMyw0Ljc5Nzc0ODQzIDYuNzQ2NDkyMDUsNC43OTc3NDg0MyBMNC4zNTM2MDE1LDQuNzk3NzQ4NDMgQzQuMzUzNjAxNSw0Ljc5Nzc0ODQzIDQuMjE2MDg5OCw0Ljc5Nzc0ODQzIDQuMTY0NjM5ODUsNC44MTM3OTkyNSBDNC4wMjcxMjgxNiw0Ljg3OTc4NTk5IDQuMDYxNzM5OTQsNC45Nzc4NzQzOCA0LjE4MTQ3ODAyLDUuMDkyOTA1MzEgTDUuMDI1MjU3MjUsNS44OTcyMzAxMiBDNS4xMjgxNTcxNiw1Ljk5NTMxODUxIDUuMTExMzE4OTksNi4xNDMzNDI4MSA1LjAwODQxOTA4LDYuMjQxNDMxMiBMNC42Mjk1NjAzNCw2LjYwMjU3NDgyIEM0LjUyNjY2MDQzLDYuNzAwNjYzMjEgNC40MDU5ODY5LDYuNzAwNjYzMjEgNC4zMDIxNTE1NCw2LjYxODYyNTY1IEwyLjA2NDU0NjMsNC40ODU2NDkgQzEuOTc4NDg0NTcsNC40MDM2MTE0NCAxLjk3ODQ4NDU3LDQuMjcyNTI5NjggMi4wNjQ1NDYzLDQuMTkwNDkyMTEgTDQuMjg1MzEzMzgsMi4wNzM1NjYyOSBDNC4zODgyMTMyOCwxLjk3NTQ3NzkgNC41NjAzMzY3NiwxLjk3NTQ3NzkgNC42NDYzOTg1LDIuMDczNTY2MjkgTDUuMDA3NDgzNjMsMi40MTc3NjczNyBDNS4xMTAzODM1NCwyLjUxNTg1NTc3IDUuMTEwMzgzNTQsMi42Nzk5MzA4OSA1LjAwNzQ4MzYzLDIuNzYxOTY4NDYgTDQuMTYzNzA0NCwzLjU2NjI5MzI2IEM0LjA2MDgwNDQ5LDMuNjY0MzgxNjUgNC4wNjA4MDQ0OSwzLjc3OTQxMjU4IDQuMjMyOTI3OTcsMy43Nzk0MTI1OCBMNC4zNTM2MDE1LDMuNzc5NDEyNTggTDYuNzQ2NDkyMDUsMy43OTYzNTUxMiBaIiBmaWxsPSIjNkU2RTZFIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMDAwMDAwLCA2LjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtNi4wMDAwMDAsIC02LjAwMDAwMCkgIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==', position: GC.Spread.Sheets.IconPosition.outsideRight } ] }; setIcon(7, 6, style); //Icon size style = new GC.Spread.Sheets.Style(); style.decoration = { icons: [ { src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+dW5kbzwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJ1bmRvIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNNi43NDY0OTIwNSwzLjc5NjM1NTEyIEM4LjUzNjk1MDQyLDMuNzk2MzU1MTIgMTAsNS4xNzQ5NDI4NyAxMCw2Ljg5NzczMTcxIEMxMCw4LjYyMDUyMDU0IDguNTM2OTUwNDIsMTAgNi43NDY0OTIwNSwxMCBMNS4zMzQ4OTI0MiwxMCBDNS4xOTczODA3MywxMCA1LjExMTMxODk5LDkuOTAxOTExNjEgNS4xMTEzMTg5OSw5Ljc2OTkzODE0IEw1LjExMTMxODk5LDkuMjQ0NzE5MzkgQzUuMTExMzE4OTksOS4xMTM2Mzc2MyA1LjIxNDIxODksOC45OTg2MDY3IDUuMzUyNjY2MDQsOC45OTg2MDY3IEw2Ljc0NzQyNzUsOC45OTg2MDY3IEM3Ljk3MDA2NTQ4LDguOTk4NjA2NyA4Ljk1MTM1NjQxLDguMDYzMjAwMTMgOC45NTEzNTY0MSw2Ljg5NzczMTcxIEM4Ljk1MTM1NjQxLDUuNzMyMjYzMjggNy45NjkxMzAwMyw0Ljc5Nzc0ODQzIDYuNzQ2NDkyMDUsNC43OTc3NDg0MyBMNC4zNTM2MDE1LDQuNzk3NzQ4NDMgQzQuMzUzNjAxNSw0Ljc5Nzc0ODQzIDQuMjE2MDg5OCw0Ljc5Nzc0ODQzIDQuMTY0NjM5ODUsNC44MTM3OTkyNSBDNC4wMjcxMjgxNiw0Ljg3OTc4NTk5IDQuMDYxNzM5OTQsNC45Nzc4NzQzOCA0LjE4MTQ3ODAyLDUuMDkyOTA1MzEgTDUuMDI1MjU3MjUsNS44OTcyMzAxMiBDNS4xMjgxNTcxNiw1Ljk5NTMxODUxIDUuMTExMzE4OTksNi4xNDMzNDI4MSA1LjAwODQxOTA4LDYuMjQxNDMxMiBMNC42Mjk1NjAzNCw2LjYwMjU3NDgyIEM0LjUyNjY2MDQzLDYuNzAwNjYzMjEgNC40MDU5ODY5LDYuNzAwNjYzMjEgNC4zMDIxNTE1NCw2LjYxODYyNTY1IEwyLjA2NDU0NjMsNC40ODU2NDkgQzEuOTc4NDg0NTcsNC40MDM2MTE0NCAxLjk3ODQ4NDU3LDQuMjcyNTI5NjggMi4wNjQ1NDYzLDQuMTkwNDkyMTEgTDQuMjg1MzEzMzgsMi4wNzM1NjYyOSBDNC4zODgyMTMyOCwxLjk3NTQ3NzkgNC41NjAzMzY3NiwxLjk3NTQ3NzkgNC42NDYzOTg1LDIuMDczNTY2MjkgTDUuMDA3NDgzNjMsMi40MTc3NjczNyBDNS4xMTAzODM1NCwyLjUxNTg1NTc3IDUuMTEwMzgzNTQsMi42Nzk5MzA4OSA1LjAwNzQ4MzYzLDIuNzYxOTY4NDYgTDQuMTYzNzA0NCwzLjU2NjI5MzI2IEM0LjA2MDgwNDQ5LDMuNjY0MzgxNjUgNC4wNjA4MDQ0OSwzLjc3OTQxMjU4IDQuMjMyOTI3OTcsMy43Nzk0MTI1OCBMNC4zNTM2MDE1LDMuNzc5NDEyNTggTDYuNzQ2NDkyMDUsMy43OTYzNTUxMiBaIiBmaWxsPSIjNkU2RTZFIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+', position: GC.Spread.Sheets.IconPosition.outsideLeft, width: 22, height: 22 }, { src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcgOUg1TDUgNS45NjA0NmUtMDhIN0w3IDlaTTYgMTBDNi41NTIyOCAxMCA3IDEwLjQ0NzcgNyAxMUM3IDExLjU1MjMgNi41NTIyOCAxMiA2IDEyQzUuNDQ3NzIgMTIgNSAxMS41NTIzIDUgMTFDNSAxMC40NDc3IDUuNDQ3NzIgMTAgNiAxMFoiIGZpbGw9IiNFNjUyNDkiLz4KPC9zdmc+Cg==', position: GC.Spread.Sheets.IconPosition.left, width: 10, height: 10 }, { src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABPklEQVR4Ae2YAWYDQRSGV6BUabFQiKE28wA9Qo7Qo/QIBRTQGyQESlUWURRSVdZssL3B5gZJT/A6A8Eq8qck//I+foDxvjWzfi8zuhiGYRg6yZxOs3lMG6N7ZsI0/AYYnEoiCZT44EQSwNfnlEgDkKSNmacrDQuQZQNIUApoepeQAGHavguoCewyG6i+5apfN6q1HDm+0ZWM/yewHKbDTpswujtM4PUiHUAgIO1hAu/XHAIpjThc4NP1XKAWmuBX6PmMSeADFygviQT8Ey6wyHkEVv4eF1gOiQRkjAtUBY9A464wgdmAZ/gga7xKvJzT/4F20D/gIA+IAEGFAIpcgr5C1MUtLsBcIbpQV4jgv/fZzG15K4RM8dXiIud/wB0BF7OlqxDBl9CGOqaMWZ+8QlTFj1ajx7/qg2EYhmH8AtrSH2QJmV2LAAAAAElFTkSuQmCC', position: GC.Spread.Sheets.IconPosition.leftOfText, width: 16, height: 16 }, { src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+ZWxsaXBzaXM8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iZWxsaXBzaXMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik0yLDcgQzEuNDQ3NzE1MjUsNyAxLDYuNTUyMjg0NzUgMSw2IEMxLDUuNDQ3NzE1MjUgMS40NDc3MTUyNSw1IDIsNSBDMi41NTIyODQ3NSw1IDMsNS40NDc3MTUyNSAzLDYgQzMsNi41NTIyODQ3NSAyLjU1MjI4NDc1LDcgMiw3IFogTTYsNyBDNS40NDc3MTUyNSw3IDUsNi41NTIyODQ3NSA1LDYgQzUsNS40NDc3MTUyNSA1LjQ0NzcxNTI1LDUgNiw1IEM2LjU1MjI4NDc1LDUgNyw1LjQ0NzcxNTI1IDcsNiBDNyw2LjU1MjI4NDc1IDYuNTUyMjg0NzUsNyA2LDcgWiBNMTAsNyBDOS40NDc3MTUyNSw3IDksNi41NTIyODQ3NSA5LDYgQzksNS40NDc3MTUyNSA5LjQ0NzcxNTI1LDUgMTAsNSBDMTAuNTUyMjg0Nyw1IDExLDUuNDQ3NzE1MjUgMTEsNiBDMTEsNi41NTIyODQ3NSAxMC41NTIyODQ3LDcgMTAsNyBaIiBmaWxsPSIjNkU2RTZFIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==', position: GC.Spread.Sheets.IconPosition.rightOfText, width: 14, height: 14 }, { src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+b2s8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0ib2siIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGQ9Ik01LjY3NjUyMjQsMTAgQzUuNjc2NTIyNCwxMCA2LjkxNzAzMjUzLDcuMzM0ODI5MDcgOC40MTk2ODA3OSw1LjMyNjE2ODAyIEM5LjU4MDA5Mzk2LDMuNzc2MzU0NDYgMTEsMi43MTg3NTQxMSAxMSwyLjcxODc1NDExIEwxMC41MTYxMDg0LDIgQzEwLjUxNjEwODQsMiA4Ljk2NzEyNTYsMi43MDIwNjg3NSA3LjU3NzY3MjIzLDQuMDUwMzc0NDYgQzYuMTY4MzYwMTEsNS40MTcyOTA3NiA1LjM0NDg4MTIxLDYuOTQ2NTczNSA1LjM0NDg4MTIxLDYuOTQ2NTczNSBMMy4yOTc0Mzg1Niw1LjAxMTcxMzA5IEwyLDYuNDYwMTI1OTcgTDUuNjc2NTE5ODEsOS45OTk5ODc0NyBMNS42NzY1MTk4MSw5Ljk5OTk4NzQ3IEw1LjY3NjUyMjQsMTAgWiIgaWQ9Ik9LIiBmaWxsPSIjNkU2RTZFIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+', position: GC.Spread.Sheets.IconPosition.right, width: 18, height: 18 }, { src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+Y2xlYXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iY2xlYXIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGZpbGw9IiM2RTZFNkUiIGZpbGwtcnVsZT0ibm9uemVybyIgcG9pbnRzPSI4Ljg3NTQ2MzkgMyAxMCA0LjEyNDUzNjEgNy42MjQ1MzYxIDYuNSAxMCA4Ljg3NTQ2MzkgOC44NzU0NjM5IDEwIDYuNSA3LjYyNDUzNjEgNC4xMjQ1MzYxIDEwIDMgOC44NzU0NjM5IDUuMzc1NDYzOSA2LjUgMyA0LjEyNDUzNjEgNC4xMjQ1MzYxIDMgNi41IDUuMzc1NDYzOSI+PC9wb2x5Z29uPgogICAgPC9nPgo8L3N2Zz4=', position: GC.Spread.Sheets.IconPosition.right, width: 18, height: 18 }, { src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+cmVkbzwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJyZWRvIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNNi43NDY0OTIwNSwzLjc5NjM1NTEyIEM4LjUzNjk1MDQyLDMuNzk2MzU1MTIgMTAsNS4xNzQ5NDI4NyAxMCw2Ljg5NzczMTcxIEMxMCw4LjYyMDUyMDU0IDguNTM2OTUwNDIsMTAgNi43NDY0OTIwNSwxMCBMNS4zMzQ4OTI0MiwxMCBDNS4xOTczODA3MywxMCA1LjExMTMxODk5LDkuOTAxOTExNjEgNS4xMTEzMTg5OSw5Ljc2OTkzODE0IEw1LjExMTMxODk5LDkuMjQ0NzE5MzkgQzUuMTExMzE4OTksOS4xMTM2Mzc2MyA1LjIxNDIxODksOC45OTg2MDY3IDUuMzUyNjY2MDQsOC45OTg2MDY3IEw2Ljc0NzQyNzUsOC45OTg2MDY3IEM3Ljk3MDA2NTQ4LDguOTk4NjA2NyA4Ljk1MTM1NjQxLDguMDYzMjAwMTMgOC45NTEzNTY0MSw2Ljg5NzczMTcxIEM4Ljk1MTM1NjQxLDUuNzMyMjYzMjggNy45NjkxMzAwMyw0Ljc5Nzc0ODQzIDYuNzQ2NDkyMDUsNC43OTc3NDg0MyBMNC4zNTM2MDE1LDQuNzk3NzQ4NDMgQzQuMzUzNjAxNSw0Ljc5Nzc0ODQzIDQuMjE2MDg5OCw0Ljc5Nzc0ODQzIDQuMTY0NjM5ODUsNC44MTM3OTkyNSBDNC4wMjcxMjgxNiw0Ljg3OTc4NTk5IDQuMDYxNzM5OTQsNC45Nzc4NzQzOCA0LjE4MTQ3ODAyLDUuMDkyOTA1MzEgTDUuMDI1MjU3MjUsNS44OTcyMzAxMiBDNS4xMjgxNTcxNiw1Ljk5NTMxODUxIDUuMTExMzE4OTksNi4xNDMzNDI4MSA1LjAwODQxOTA4LDYuMjQxNDMxMiBMNC42Mjk1NjAzNCw2LjYwMjU3NDgyIEM0LjUyNjY2MDQzLDYuNzAwNjYzMjEgNC40MDU5ODY5LDYuNzAwNjYzMjEgNC4zMDIxNTE1NCw2LjYxODYyNTY1IEwyLjA2NDU0NjMsNC40ODU2NDkgQzEuOTc4NDg0NTcsNC40MDM2MTE0NCAxLjk3ODQ4NDU3LDQuMjcyNTI5NjggMi4wNjQ1NDYzLDQuMTkwNDkyMTEgTDQuMjg1MzEzMzgsMi4wNzM1NjYyOSBDNC4zODgyMTMyOCwxLjk3NTQ3NzkgNC41NjAzMzY3NiwxLjk3NTQ3NzkgNC42NDYzOTg1LDIuMDczNTY2MjkgTDUuMDA3NDgzNjMsMi40MTc3NjczNyBDNS4xMTAzODM1NCwyLjUxNTg1NTc3IDUuMTEwMzgzNTQsMi42Nzk5MzA4OSA1LjAwNzQ4MzYzLDIuNzYxOTY4NDYgTDQuMTYzNzA0NCwzLjU2NjI5MzI2IEM0LjA2MDgwNDQ5LDMuNjY0MzgxNjUgNC4wNjA4MDQ0OSwzLjc3OTQxMjU4IDQuMjMyOTI3OTcsMy43Nzk0MTI1OCBMNC4zNTM2MDE1LDMuNzc5NDEyNTggTDYuNzQ2NDkyMDUsMy43OTYzNTUxMiBaIiBmaWxsPSIjNkU2RTZFIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMDAwMDAwLCA2LjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtNi4wMDAwMDAsIC02LjAwMDAwMCkgIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==', position: GC.Spread.Sheets.IconPosition.outsideRight, width: 22, height: 22 } ] }; setIcon(10, 6, style); sheet.resumePaint(); }; function setLayout(sheet) { sheet.getRange(2, 0, 1, 10) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { bottom: true }); sheet.getRange(5, 0, 1, 10) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { bottom: true }); sheet.getRange(8, 0, 1, 10) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { bottom: true }); sheet.getRange(11, 0, 1, 10) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { bottom: true }); sheet.getRange(0, 4, 12, 1) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { right: true }); sheet.getRange(0, 9, 12, 1) .setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin) , { right: true }); for (var i = 0; i < 10; i++) { let width = 100; if (i === 1 || i === 6) { width = 150; } sheet.setColumnWidth(i, width); } for (var i = 0; i < 30; i++) { sheet.setRowHeight(i, 25); i++; sheet.setRowHeight(i, 25); i++; } sheet.getCell(0, 0).value("Icon on the left side in the cell").font("bold 16px Calibri"); sheet.getCell(3, 0).value("Icon on the left side of the text").font("bold 16px Calibri"); sheet.getCell(6, 0).value("Icon on the outside left of the cell").font("bold 16px Calibri"); sheet.getCell(9, 0).value("Multiple icons").font("bold 16px Calibri"); sheet.getCell(0, 5).value("Icon on the right side in the cell").font("bold 16px Calibri"); sheet.getCell(3, 5).value("Icon on the right side of the text").font("bold 16px Calibri"); sheet.getCell(6, 5).value("Icon on the outside right of the cell").font("bold 16px Calibri"); sheet.getCell(9, 5).value("Icon size").font("bold 16px Calibri"); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="zh-cn" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" style="width:100%; height: 100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }