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;
initSheet(sheet, applyImageFormula);
var sheet2 = spread.getSheet(1);
initSheet(sheet2, applyImageFormatter);
spread.resumePaint();
}
function applyImageFormula(sheet) {
for (let i = 2; i < 17; i++) {
sheet.setFormula(i, 0, '=IMAGE(F' + (i + 1) + ')');
}
sheet.setColumnWidth(5, 0);
}
function applyImageFormatter(sheet) {
for (let i = 2; i < 17; i++) {
sheet.getCell(i, 5).formatter('=IMAGE(@)');
}
}
function initSheet(sheet, fnCallback) {
sheet.suspendPaint();
sheet.addSpan(0, 0, 1, 6);
sheet.getCell(0, 0).value("Employees List").font("17px Arial").backColor("#E8E8E8").vAlign(GC.Spread.Sheets.VerticalAlign.center);
sheet.getRange(1, 0, 1, 6).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, 1, data);
if (fnCallback) {
fnCallback.apply(this, [sheet]);
}
sheet.getRange(2, 4, 15, 1).formatter('dd-MM-yyyy').hAlign(GC.Spread.Sheets.HorizontalAlign.center);
sheet.getRange(2, 0, 15, 6).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.setColumnWidth(0, 80);
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.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;
}
