概述
本 Demo 展示了如何使用 IMAGE 函数在单元格中插入图片。Demo 演示了两种使用方式:使用 XLOOKUP 函数从产品列表动态查找图片 URL,以及直接使用 IMAGE 函数设置固定的图片 URL。
实现思路
使用 fromJSON 加载预设的表格数据,包含产品列表和图片信息
启用动态数组功能以支持 XLOOKUP 函数的数组返回
在单元格 B2 中设置 XLOOKUP 公式,根据产品名称从产品列表中查找对应的图片
在 E6:E15 单元格区域直接设置 IMAGE 公式,为每个单元格指定固定的图片 URL
代码解析
使用 XLOOKUP 动态查找图片
这行代码在 B2 单元格设置公式,使用 XLOOKUP 函数根据 A2 单元格中的产品名称,在 Product_list 表中查找匹配的图片 URL。XLOOKUP 会自动返回对应的图片数据,并通过 IMAGE 函数渲染到单元格中。
直接设置图片 URL
这些代码直接在单元格中设置 IMAGE 公式,第一个参数是图片的 URL 路径,第二个参数是替代文本(用于无障碍访问和搜索功能)。
初始化配置
使用 fromJSON 加载预定义的表格数据,并启用 allowDynamicArray 选项以支持 XLOOKUP 等动态数组函数。
运行效果
单元格 B2 会根据 A2 中的产品名称自动显示对应的产品图片
单元格区域 E6:E15 显示一系列固定的产品图片,包括靴子、连衣裙、眼镜、帽子等
图片会根据单元格大小自动调整显示方式(默认保持纵横比)
鼠标悬停在图片上时,会显示替代文本提示
API 参考
setFormula 方法
row: 行索引
col: 列索引
value: 公式字符串
sheetArea: 可选,指定工作表区域
IMAGE 函数语法
参数说明:
source: 图片的 URL、引用或 Base64 字符串
alt_text: (可选) 用于描述图像的替代文本
sizing: (可选) 图像填充类型(0-保持比例,1-完全填充,2-原始尺寸,3-自定义尺寸)
height、width: (可选) 当 sizing 为 3 时,指定图像的高度和宽度
clipX、clipY: (可选) 裁剪区域左上角坐标
clipHeight、clipWidth: (可选) 裁剪区域的高度和宽度
vAlign: (可选) 垂直对齐方式(0-顶部,1-居中,2-底部)
hAlign: (可选) 水平对齐方式(0-左对齐,1-居中,2-右对齐)
window.onload = () => {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
}
function initSpread(spread) {
spread.suspendPaint();
spread.fromJSON(data[0]);
spread.options.allowDynamicArray = true;
var sheet = spread.getActiveSheet();
sheet.name("Image Formula");
initImageFormula(sheet);
spread.resumePaint();
}
function initImageFormula(sheet) {
sheet.setFormula(1, 1, '=XLOOKUP(A2,Product_list[ITEM],Product_list[IMAGE])');
sheet.setFormula(5, 4, '=IMAGE("$DEMOROOT$/spread/source/images/avatar/image13.jpg", "Wellington boots")');
sheet.setFormula(6, 4, '=IMAGE("$DEMOROOT$/spread/source/images/avatar/image4.jpg", "Dress")');
sheet.setFormula(7, 4, '=IMAGE("$DEMOROOT$/spread/source/images/avatar/image5.png", "Glasses")');
sheet.setFormula(8, 4, '=IMAGE("$DEMOROOT$/spread/source/images/avatar/image6.jpg", "Hat")');
sheet.setFormula(9, 4, '=IMAGE("$DEMOROOT$/spread/source/images/avatar/image7.png", "Jacket")');
sheet.setFormula(10, 4, '=IMAGE("$DEMOROOT$/spread/source/images/avatar/image8.jpg", "Shorts")');
sheet.setFormula(11, 4, '=IMAGE("$DEMOROOT$/spread/source/images/avatar/image9.jpg", "Slippers")');
sheet.setFormula(12, 4, '=IMAGE("$DEMOROOT$/spread/source/images/avatar/image10.jpg", "Suitcase")');
sheet.setFormula(13, 4, '=IMAGE("$DEMOROOT$/spread/source/images/avatar/image11.png", "Swimsuit")');
sheet.setFormula(14, 4, '=IMAGE("$DEMOROOT$/spread/source/images/avatar/image12.jpg", "T-shirt")');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="UTF-8">
<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="$DEMOROOT$/spread/source/data/image-function.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;
}
