之前有讲过如何对SpreadJS 进行图片绑定,其中一种方法是浮动图片,那么如何准确的在单元格,设置合并单元格上浮动图片呢?
请参考如下代码
通过getCellInfo方法,获取到单元格的实际坐标,再通过getSpanInfo的方法获取单元格包含合并后的实际大小,这样就可以准确的在一个合并单元格上浮动图片了。
- let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
- let sheet = spread.getActiveSheet();
- let row = 15, col = 2
- sheet.setRowHeight(row, 100);
- sheet.setColumnWidth(col, 300);
- sheet.addSpan(row, col, 2, 2)
- sheet.setValue(row, col, [{src:"https://www.grapecity.com.cn/images/metalsmith/home/community_QRcode.jpg", width: 100, height:100},
- {src:"https://www.grapecity.com.cn/images/metalsmith/home/logo_funeng.png", width:200, height:100}])
- sheet.getCell(row, col).backColor("#533A6F")
- addCellImage(sheet, row, col);
- function getSpanInfo(sheet, row, col) {
- var spans = sheet.getSpans(new GC.Spread.Sheets.Range(row, col, 1, 1));
- if (spans && spans.length) {
- var span = spans[0]
- if(span.row === row, span.col === col){
- var width = 0, height = 0;
- for (var i = span.row; i < span.row + span.rowCount; i++) {
- height += sheet.getRowHeight(i)
- }
- for (var i = span.col; i < span.col + span.colCount; i++) {
- width += sheet.getColumnWidth(i)
- }
- return {
- width, height
- }
- }
- else{
- return null
- }
- }
- else {
- return {
- width: sheet.getColumnWidth(col),
- height: sheet.getRowHeight(row)
- }
- }
- }
- function getCellInfo(sheet, row, col) {
- var width = 0, height = 0;
- for (var i = 0; i < row; i++) {
- height += sheet.getRowHeight(i)
- }
- for (var i = 0; i < col; i++) {
- width += sheet.getColumnWidth(i)
- }
- return { width, height }
- }
- async function addCellImage(sheet, row, col){
- let imageCellValue = sheet.getValue(row, col);
- var spanInfo = getSpanInfo(sheet, row, col)
- var cellInfo = getCellInfo(sheet, row, col)
- if(imageCellValue && imageCellValue.length > 0){
- let widthStart = 0;
- for(var index in imageCellValue){
- let img = imageCellValue[index]
- if(img.src){
- let picture = sheet.pictures.add(sheet.name() + sheet.pictures.all().length, img.src, cellInfo.width + widthStart, cellInfo.height, img.width, spanInfo.height);
- widthStart += img.width
- }
- }
- }
- }
复制代码
|
|