IMAGE関数を使用して画像を作成できます： =IMAGE(URL,mode,height,width,clipX,clipY,clipHeight,clipWidth,vAlign,hAlign)
この関数には次のパラメータがあります：
URL：Web上の画像の場所またはベースとなる文字列。
mode：（オプション）画像のフィットモードを表す番号。次のいずれか：
縦横比を維持して表示 - 1
画像全体を表示 - 2
元のサイズで表示 - 3
カスタムサイズで表示 - 4
height：（オプション）modeが4の場合の画像の高さです。
width：（オプション）modeが4の場合の画像の幅です。
clipX：（オプション）デスティネイションコンテキストに描画するソース画像のサブ長方形の左上のX座標。
clipY：（オプション）デスティネイションコンテキストに描画するソース画像のサブ長方形の左上のY座標。
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.setSheetCount(2);
var sheet = spread.getSheet(0);
spread.options.allowDynamicArray = true;
sheet.name("Image Formatter");
initSheet(sheet, applyImageFormatter);
var sheet2 = spread.getSheet(1);
sheet2.name("Image Formula");
initSheet(sheet2, applyImageFormula);
spread.resumePaint();
}
function applyImageFormula(sheet) {
sheet.addColumns(1, 1);
sheet.getCell(1, 1).setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin), { bottom: true });
for (let i = 2; i < 17; i++) {
sheet.setFormula(i, 1, '=IMAGE(\"$DEMOROOT$/spread/source/images/avatar/\"&A' + (i + 1) + ')');
}
sheet.setColumnWidth(0, 0);
sheet.setColumnWidth(1, 80);
}
function applyImageFormatter(sheet) {
for (let i = 2; i < 17; i++) {
sheet.getCell(i, 0).formatter('=IMAGE(\"$DEMOROOT$/spread/source/images/avatar/\"&@)');
}
}
function initSheet(sheet, fnCallback) {
sheet.suspendPaint();
sheet.addSpan(0, 0, 1, 5);
sheet.getCell(0, 0).value("Employees List").font("17px Arial").backColor("#E8E8E8").vAlign(GC.Spread.Sheets.VerticalAlign.center);
sheet.getRange(1, 0, 1, 5).font("bold 13px Arial").vAlign(GC.Spread.Sheets.VerticalAlign.center)
.setBorder(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin), { bottom: true });
sheet.setArray(1, 0, data);
sheet.getRange(2, 4, 15, 1).formatter('dd-MM-yyyy').hAlign(GC.Spread.Sheets.HorizontalAlign.center);
sheet.getRange(2, 0, 15, 5).vAlign(GC.Spread.Sheets.VerticalAlign.center);
for (var i = 1; i < 5; i++) {
sheet.setColumnWidth(i, 160);
}
for (var i = 2; i < 17; i++) {
sheet.setRowHeight(i, 55);
}
sheet.setRowHeight(0, 30);
sheet.setRowHeight(1, 30);
sheet.addSpan(2, 7, 1, 5);
sheet.setText(2, 7, "You can set image according to URL or base64");
sheet.getRange(2, 7, 2, 2).vAlign(GC.Spread.Sheets.VerticalAlign.center)
.hAlign(GC.Spread.Sheets.HorizontalAlign.center);
sheet.addSpan(3, 7, 2, 5);
sheet.setFormula(3, 7, '=IMAGE("https://www.grapecity.com/spreadjs/demos/spread/source/logo-en.ico",4,50,150)');
sheet.setColumnWidth(0, 80);
if (fnCallback) {
fnCallback.apply(this, [sheet]);
}
sheet.resumePaint();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="spreadjs culture" content="ja-jp" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.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-sparkline.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.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;
}
