图像函数迷你图

The 图像函数迷你图可用于在单元格中放置图像，使用图像函数迷你图可以将图像以不同的尺寸显示：:

图像函数迷你图具有以下参数，其中只有“URL”是必需的参数：

选项	描述
URL	图像在网络上的位置或 base64 字符串。
[mode]	指定如何调整图像大小。1 - 保持纵横比以适合单元格。 2 - 拉伸图像以覆盖整个单元格。 3 - 即使裁剪也保持原始尺寸。 4 - 自定义默认值为 1。
[height]	图像的高度。. mode 选项必须是 4。
[width]	图像的宽度。 mode 选项必须是 4。
[clipX]	要绘制到目标上下文中的源图像子矩形左上角的 x 轴坐标。默认值为 0.
[clipY]	要绘制到目标上下文中的源图像子矩形左上角的 y 轴坐标。默认值为 0.
[clipHeight]	要绘制到目标上下文中的源图像子矩形的高度。默认值是图像的高度。
[clipWidth]	要绘制到目标上下文中的源图像子矩形的宽度。默认值是图像的宽度。
[vAlign]	图像的垂直对齐。0 - Top1 - Center2 - Bottom T默认值为 1 (center).
[hAlign]	图像的水平对齐。0 - Left1 - Center2 - Right The default value is 1 (center).

图像函数迷你图语法如下：

=IMAGE(url, [mode], [height], [width], [clipX], [clipY], [clipHeight], [clipWidth], [vAlign], [hAlign])

具有不同参数值的行为

使用图像函数迷你图的某些参数值观察到以下行为：

当mode设置为4时，必须指定图片的高度和宽度，否则返回一个空白单元格。
如果在设置clipX 时未指定clipWidth 值，则clipWidth 值将设置为（图像宽度-clipX）。这同样适用于 clipHeight 和 clipY 参数。
如果clipX 大于图像宽度，则clipWidth 设置为0。同样，对于clipY 和图像高度。
如果模式、vAlign 或 hAlign 设置为非法值，则运行时会将模式设置为 1。
如果将以下参数设置为小于 0 的值，则将其替换为 0：Width, Height, ClipX, ClipY, ClipHeight, ClipWidth

使用场景

在以下用例中，将显示世界上人口最多的 10 个国家/地区的列表。该列表还显示了使用图像函数结构图功能通过 Web URL 选取的国家/地区旗帜图像。

// 初始化Spread
spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
spread.suspendPaint();
//  获取工作表
var sheet1 = spread.getSheet(0);
// set sheetAreaOffset option
sheet1.options.sheetAreaOffset = { left: 1, top: 1 };
// 隐藏网格线
sheet1.options.gridline = { showVerticalGridline: false, showHorizontalGridline: false };
//  隐藏行/列标题
sheet1.options.colHeaderVisible = false;
sheet1.options.rowHeaderVisible = false;
// 设置数据数组
sheet1.setArray(1, 1, Top10_CountryPopulation);
// set value in cells
sheet1.setValue(1, 0, "Flag", GC.Spread.Sheets.SheetArea.dataArea);
sheet1.setValue(0, 0, "Top 10 Populated Countries", GC.Spread.Sheets.SheetArea.dataArea);
// 设置标题行的对齐方式
sheet1.getRange(-1, 0, -1, 10).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
sheet1.addSpan(0, 0, 1, 5, GC.Spread.Sheets.SheetArea.dataArea);
//  添加表格到 sheet1
sheet1.tables.add('tablePopulation', 1, 0, 11, 5);
// 设置列宽
sheet1.setColumnWidth(0, 70);
sheet1.setColumnWidth(1, 100);
sheet1.setColumnWidth(2, 80);
sheet1.setColumnWidth(3, 150);
sheet1.setColumnWidth(4, 150);
// 设置行高
sheet1.setRowHeight(0, 40);
for (var i = 2; i < 12; i++)
    sheet1.setRowHeight(i, 30);

// 在单元格中设置图像函数公式
sheet1.setFormula(2, 0, '= IMAGE("https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Flag_of_the_People%27s_Republic_of_China.svg/23px-Flag_of_the_People%27s_Republic_of_China.svg.png")');
sheet1.setFormula(3, 0, '= IMAGE("https://upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg")');
sheet1.setFormula(4, 0, '= IMAGE("https://previews.123rf.com/images/auttkhamkhauncham/auttkhamkhauncham1507/auttkhamkhauncham150700090/42304741-usa-flag.jpg")');
sheet1.setFormula(5, 0, '= IMAGE("https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg")');
sheet1.setFormula(6, 0, '= IMAGE("https://static.vecteezy.com/system/resources/previews/000/114/048/non_2x/free-vector-pakistan-flag.jpg")');
sheet1.setFormula(7, 0, '= IMAGE("https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg")');
sheet1.setFormula(8, 0, '= IMAGE("https://i.pinimg.com/originals/73/22/94/732294310c7e9fa3da611030168923fb.jpg")');
sheet1.setFormula(9, 0, '= IMAGE("https://images-na.ssl-images-amazon.com/images/I/31V23jzzMgL._AC_.jpg")');
sheet1.setFormula(10, 0, '= IMAGE("https://upload.wikimedia.org/wikipedia/en/thumb/f/f3/Flag_of_Russia.svg/1200px-Flag_of_Russia.svg.png")');
sheet1.setFormula(11, 0, '= IMAGE("https://upload.wikimedia.org/wikipedia/en/2/20/Flag_of_Mexico_1917.png")');         

// 设置第 0 行的样式
var style1 = new GC.Spread.Sheets.Style();
style1.font = "bold 24px Calibri";
style1.foreColor = "black";
style1.backColor = "#9FD5B7";
style1.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style1.vAlign = GC.Spread.Sheets.VerticalAlign.center;
sheet1.setStyle(0, 0, style1, GC.Spread.Sheets.SheetArea.dataArea);

// 设置标题行 1 的样式
var style1 = new GC.Spread.Sheets.Style();
style1.font = "bold 14px Calibri";
style1.foreColor = "black";
style1.backColor = "#9FD5B7";
for (var i = 0; i < 5; i++)
    sheet1.setStyle(1, i, style1, GC.Spread.Sheets.SheetArea.dataArea);

// 设置剩余行的样式
var style2 = new GC.Spread.Sheets.Style();
style2.backColor = "#EDFDF4";
for (var i = 0; i < 5; i++)
    for (var j = 2; j < 12; j++)
        sheet1.setStyle(j, i, style2, GC.Spread.Sheets.SheetArea.dataArea);

sheet1.getCell(2, 3).formatter("##,##,##0");

//  为 dataArea 单元格设置边框
sheet1.getRange("A2:E12").setBorder(
    new GC.Spread.Sheets.LineBorder("white", GC.Spread.Sheets.LineStyle.thin),
    { top: true, bottom: true, left: true, right: true }, GC.Spread.Sheets.SheetArea.dataArea);
spread.resumePaint();

局限性

如果图像 URL 是跨域 URL，则在导出 PDF 文件时不会打印单元格。仅当 URL 是定位域 URL 或 base64 字符串时才会打印。