Localization

SpreadJS provides built-in support for English culture (default), Chinese (need corresponding resource file), and Japanese (need corresponding resource file). You can use them to support your localization work.

In order to support localization, you need to add the appropriate js file link into the document's head section below the Spread link. For example: Then you can choose one of the following methods to support localization. Culture meta You can set culture using the meta tag: Change with code You can change culture using the GC.Spread.Common.CultureManager.culture method:
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); initSpread(spread); document.getElementById('cultureName').onchange = function (e) { GC.Spread.Common.CultureManager.culture(e.target.value); }; } function initSpread(spread) { spread.suspendPaint(); spread.options.showResizeTip = spreadNS.ShowResizeTip.both; spread.options.showScrollTip = spreadNS.ShowScrollTip.both; var sheet = spread.getActiveSheet(); for (var r = 0; r < 10; r++) { for (var c = 0; c < 5; c++) { sheet.setValue(r, c, r + c); } } sheet.rowFilter(new spreadNS.Filter.HideRowFilter(new spreadNS.Range(0, 0, 10, 5))); sheet.setValue(10, 0, "SUM:"); sheet.setFormula(10, 1, "SUM(A1:E10)"); sheet.setValue(11, 0, "PIESPARKLINE:"); sheet.setFormula(11, 1, 'PIESPARKLINE(A1:E10,"yellow", "green")'); sheet.setRowHeight(11, 100); sheet.setColumnWidth(0, 120); sheet.setColumnWidth(1, 100); spread.resumePaint(); GC.Spread.Common.CultureManager.culture(document.getElementById('cultureName').value); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.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" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> <label>Culture:</label> <select id="cultureName"> <option value="en-us" selected>English</option> <option value="zh-cn">Chinese</option> <option value="ja-jp">Japanese</option> <option value="ko-kr">Korean</option> </select> </div> <div class="option-row"> <ul style="margin: 0;padding-left: 20px;"> <li>Perform any of the below actions to view the results:</li> <div>- Click a filter dropdown in the column header</div> <div>- Resize a column or row header</div> <div>- Use the scrollbar to scroll the contents</div> <li>To view localized formula descriptions:</li> <div>- Double click cell B11 or B12</div> <div>- Click to edit the formula to view the updated descriptions</div> </ul> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } label { display: block; margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }