このサンプルでは、templatesConfig オプションを使用して SpreadJS デザイナ のテンプレートギャラリーを設定する方法を示します。
リボンコンテナの config設定で templatesConfig プロパティを設定すると、テンプレート設定 JSON ファイルを指す URL を指定できます。Designer の初期化時、およびユーザーが ファイルメニューで"新規作成"を実行すると、既定のテンプレートを読み込みます。独自のテンプレートを設定すると、サムネイル付きの複数のテンプレートが ファイルメニュー の "新規作成" タブに表示され、ユーザーは事前定義されたテンプレートからワークブックをすばやく作成できます。
設定ファイルには、次の構造を持つ ITemplateConfig オブジェクトの配列が含まれます。
name: テンプレートの表示名。
data（省略可能）: string URL（Designer が取得し、拡張子から形式を自動検出します）、または Object（読み込み済みの Workbook JSON として扱われます）。省略した場合、テンプレートは空白と見なされます。
thumbnail（省略可能）: 画像 URL または base64 文字列。省略した場合、既定の空白テンプレートサムネイルが使用されます。
サポートされるテンプレート形式には、.ssjson、.sjs、.xlsx、.xltx、.xlsm、.xltm が含まれます。
Example templatesConfig.json:
テンプレートは Designer の構築後に非同期で読み込まれるため、new Designer() の直後に実行したワークブックへの操作は、テンプレートの読み込み完了時に上書きされる可能性があります。ワークブックを操作する前にテンプレートが完全に適用されたことを確認するために、designer.waitForDefaultTemplateLoaded() メソッドを使用します。
const resources = {
tips: 'リボンの「ファイル」タブをクリックしてファイルメニューを表示し、「テンプレート」を選択してカスタムページをご確認ください。',
}
window.onload = async function () {
let designer = new GC.Spread.Sheets.Designer.Designer("dss", { templatesConfig: '$DEMOROOT$/spread/source/data/templates.json' });
await designer.waitForDefaultTemplateLoaded();
let spread = designer.getWorkbook();
spread.getActiveSheet().setValue(1, 1, resources.tips);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.light.min.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-formula-panel/dist/gc.spread.sheets.formulapanel.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-designer-resources-ja/dist/gc.spread.sheets.designer.resource.ja.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-designer/dist/gc.spread.sheets.designer.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/designer/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link href="./styles.css" rel="stylesheet" type="text/css" />
</head>
<body style="margin:0;padding:0">
<div id="dss" style="width:100vw;border:1px solid darkgray"></div>
</body>
</html>
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#dss {
height: 100%;
}
