核心代码
import * as GC from "@grapecity-software/spread-sheets";function HighlightLayout(name:string){this.name = name;this._eventNs = ".HighlightLayout" + name || "";this._sheetRangesInfo = {}
}
HighlightLayout.prototype.bind = function(spread:GC.Spread.Sheets.Workbook){if(spread){this._content = spread;this._container = this._createLayoutContainer(spread.getHost())this._bindEvents(spread);}
}
HighlightLayout.prototype._createLayoutContainer = function(host:HTMLElement){host.style.position = "relative";var container = document.createElement('div');container.style.cssText = "position: absolute;height: 100%;width: 100%;top: 0px;left: 0px;pointer-events: none";host.appendChild(container)return container;
}
HighlightLayout.prototype._bindEvents = function(context:GC.Spread.Sheets.Workbook){var self = this;context.bind(GC.Spread.Sheets.Events.TopRowChanged + self._eventNs, function (e, data) {setTimeout(function(){self._resetLayout();},0);});context.bind(GC.Spread.Sheets.Events.LeftColumnChanged + self._eventNs, function (e, data) {setTimeout(function(){self._resetLayout();},0);});context.bind(GC.Spread.Sheets.Events.ColumnWidthChanged + self._eventNs, function (e, data) {setTimeout(function(){self._resetLayout();},0);});context.bind(GC.Spread.Sheets.Events.RowHeightChanged + self._eventNs, function (e, data) {setTimeout(function(){self._resetLayout();},0);});context.bind(GC.Spread.Sheets.Events.FormulatextboxActiveSheetChanged + self._eventNs, function (e, data) {setTimeout(function(){self._resetLayout();},0);});
}HighlightLayout.prototype._resetLayout = function(id){var content = this._content,container = this._container,sheet = content.getActiveSheet();//clear Layoutcontainer.innerHTML = "";var rangesInfo = this._sheetRangesInfo[sheet.name()];if(!rangesInfo){return;}for(var id in rangesInfo){var info = rangesInfo[id];if(!info.ranges){continue;}for(var i = 0; i < info.ranges.length; i++){this._paintRange(container, id + "_" + i,sheet, info.ranges[i], info.option,id)}}
}
HighlightLayout.prototype._paintRange = function(container:any, id:any, sheet:any, hightlightRange:any, option:any,name:string){const noneBorderStyle = "none",highlightBorderStyle = "3px solid " + (option && option.borderColor) || "lightseagreen";var tlRect = {},rbRect = {};var actualArea = {};for(var i = hightlightRange.row; i < hightlightRange.row + hightlightRange.rowCount; i++){var breakFlag = false;for(var j = hightlightRange.col; j < hightlightRange.col + hightlightRange.colCount; j++){var rect = sheet.getCellRect(i, j);if(rect.x != null){tlRect = rect;actualArea.rowStart = i;actualArea.colStart = j;breakFlag = true;break;}}if(breakFlag){break}}for(var i = hightlightRange.row + hightlightRange.rowCount - 1; i >= hightlightRange.row; i--){var breakFlag = false;for(var j = hightlightRange.col + hightlightRange.colCount - 1; j >= hightlightRange.col; j--){var rect = sheet.getCellRect(i, j);if(rect.x != null){rbRect = rect;actualArea.rowEnd = i;actualArea.colEnd = j;breakFlag = true;break;}}if(breakFlag){break}}var trRect = sheet.getCellRect(actualArea.rowStart, actualArea.colEnd),lbRect = sheet.getCellRect(actualArea.rowEnd, actualArea.colStart),cornerRect = sheet.getCellRect(0, 0, -1, -1);var viewportWidth = cornerRect.width + sheet.getViewportWidth(0) + sheet.getViewportWidth(1),viewportHeight = cornerRect.height + sheet.getViewportHeight(0) + sheet.getViewportHeight(1);var x = tlRect.x || lbRect.x,y = tlRect.y || trRect.y,endX = trRect.x != undefined && (trRect.x + trRect.width) || rbRect.x != undefined && (rbRect.x + rbRect.width),endY = rbRect.y != undefined && (rbRect.y + rbRect.height) || lbRect.y != undefined && (lbRect.y + lbRect.height);var left = x && x - cornerRect.width >= 0,top = y && y - cornerRect.height >= 0,right = endX && endX <= viewportWidth,bottom = endY && endY <= viewportHeight;if(!(left || top || right || bottom)){return;}x = left ? x : cornerRect.width;y = top ? y : cornerRect.height;endX = right ? endX : viewportWidth;endY = bottom ? endY : viewportHeight;var rectWidth= endX - x,rectHeight = endY - y;var highLightRect = document.createElement('div');highLightRect.id = id;highLightRect.style.position = "absolute";highLightRect.style.pointerEvents = "none";highLightRect.style.left = x - 2 + "px";highLightRect.style.top = y - 2 + "px";highLightRect.style.height = rectHeight - 2 + "px";highLightRect.style.width = rectWidth - 2 + "px";highLightRect.style.borderLeft = left ? highlightBorderStyle : noneBorderStyle;highLightRect.style.borderTop = top ? highlightBorderStyle : noneBorderStyle;highLightRect.style.borderRight = right ? highlightBorderStyle : noneBorderStyle;highLightRect.style.borderBottom = bottom ? highlightBorderStyle : noneBorderStyle;//改变位置的代码在这highLightRect.innerHTML = '<div style="position:absolute;right:0px;top:0px;transform:translateY(-100%);width: 80px;height: 20px;text-align:center;background-color:#1B9AF7;font-size: 12px;">' + name + '</div>'container.appendChild(highLightRect);
}HighlightLayout.prototype.addRanges = function(sheetName, id, ranges, option){if(sheetName && id && ranges && ranges.length){var rangesInfo = this._sheetRangesInfo[sheetName];if(!rangesInfo){this._sheetRangesInfo[sheetName] = rangesInfo = {};}rangesInfo[id] = {ranges, option}this._resetLayout(id);}
}export default HighlightLayout
调用
<template><div ref="ssDesigner" style="width:100%;height:98vh;border:1px solid darkgray"></div>
</template><script setup lang="ts">
import "@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import "@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"
import "@grapecity-software/spread-sheets-designer-resources-cn"
import * as GC from "@grapecity-software/spread-sheets";
import * as GC2 from "@grapecity-software/spread-sheets-designer"
import "@grapecity-software/spread-sheets-vue";
import HighlightLayout from "./components/HeightLightLayout.ts"import {onMounted,ref} from "vue";const ssDesigner = ref(null);onMounted(() => {if(ssDesigner.value){const divElement = ssDesigner.value as HTMLDivElement;if(divElement){var designer = new GC2.Spread.Sheets.Designer.Designer(divElement);if(designer){const spread = designer.getWorkbook() as GC.Spread.Sheets.Workbook;//const sheet = spread?.getActiveSheet();let highlightLayout = new HighlightLayout();highlightLayout.bind(spread)highlightLayout.addRanges("Sheet1", "wjl等",[new GC.Spread.Sheets.Range(1, 1, 1, 1), new GC.Spread.Sheets.Range(1, 1, 1, 1)], { borderColor: "lightGreen" })}}else{console.log('divElement不存在')}}
})
</script><style scoped></style>
如果想多个就Add多个就行
highlightLayout.addRanges("Sheet1", "wjl等",[new GC.Spread.Sheets.Range(1, 1, 1, 1), new GC.Spread.Sheets.Range(1, 1, 1, 1)], { borderColor: "lightGreen" })
highlightLayout.addRanges("Sheet1", "cs等",[new GC.Spread.Sheets.Range(2, 2, 1, 1), new GC.Spread.Sheets.Range(2, 2, 1, 1)], { borderColor: "lightGreen" })
参考
https://demo.grapecity.com.cn/spreadjs/practice/cell/highlight-area-and-add-tag
https://jscodemine.grapecity.com/share/mpNp1KNJm0qbm0HYvAE1fA/
https://gcdn.grapecity.com.cn/showtopic-199661-1-152.html
https://gcdn.grapecity.com.cn/showtopic-148906-1-1.html
https://gcdn.grapecity.com.cn/showtopic-148123-1-332.html
