SpreadJS 데모
기능별 학습
문화권
세계화

세계화

SpreadJS는 CultureInfo를 제공하여 세계화를 지원합니다.

JavaScript
Angular
Vue
Vue3
React
설명
app.vue
index.html

문화권 문자열을 수정하고 CultureInfo 클래스를 사용하여 사용자 정의 문화권을 만들 수 있습니다.

    var myCulture = new GC.Spread.Common.CultureInfo();
    myCulture.NumberFormat.currencySymbol = '€'
    myCulture.NumberFormat.numberDecimalSeparator = ',';
    // other settings ...

addCultureInfo 메서드와 문화권 이름을 함께 사용하여 사용자 정의 문화권을 추가합니다. Culture 메서드와 해당 이름을 설정하여 문화권을 사용합니다.

    GC.Spread.Common.CultureManager.addCultureInfo('de-DE', myCulture);
    GC.Spread.Common.CultureManager.culture('de-DE');

TextFormat 속성을 사용하여 워드 랩(Word srap)의 줄 바꿈 규칙을 사용자 정의할 수 있습니다.

    var myCulture = GC.Spread.Common.CultureManager.getCultureInfo();

    myCulture.TextFormat.lineBreakingChar = ["+", "-"]; // can line breaking when "+" "-"
    myCulture.TextFormat.lineBreakingForbidStart = ["》"]; // the 》won't be start of the breaking line
    myCulture.TextFormat.lineBreakingForbidEnd = ["《"]; // the 《 won't be end of the breaking line

    activeSheet.setValue(0, 0, "1-1+2+3+4+5+6+7");
    activeSheet.getCell(0, 0).wordWrap(true);  // the "1-" won't be in a separate line
    activeSheet.setValue(1, 0, "《abc》《def》《ghk》");
    activeSheet.getCell(1, 0).wordWrap(true);  // the《 》will looks better

중국 문화권에서 SpreadJS는 한자 사이를 줄바꿈하므로 lineBreakingStrategy을 단어별로 줄 바꿈하도록 사용자 정의할 수 있습니다.

var myCulture = new GC.Spread.Common.CultureInfo();
myCulture.TextFormat.lineBreakingStrategy = function (line) {
    // Add your text splitting logic here so that one word doesn't split in two lines
    // parameter "SpreadJS 是葡萄城结合 40 余年专业控件技术和在电子表格应用领域的经验而推出的纯前端表格控件"
    // return ["SpreadJS"," ","是","葡萄城","结合"," ","40"," ","余年","专业","控件","技术","和","在","电子","表格","应用","领域","的","经验","而","推出","的","纯前端","表格","控件"]
    var reg = /( )|(葡萄城)|(结合)|(余年)|(专业)|(控件)|(技术)|(电子)|(表格)|(应用)|(领域)|(经验)|(推出)|(纯前端)/g;
    var result = line.replace(reg, "\r$&\r").split("\r"); // split by the words
    return result.reduce((result, value)=>{value && result.push(value); return result}, []); // remove empty string
}
문화권 문자열을 수정하고 CultureInfo 클래스를 사용하여 사용자 정의 문화권을 만들 수 있습니다. addCultureInfo 메서드와 문화권 이름을 함께 사용하여 사용자 정의 문화권을 추가합니다. Culture 메서드와 해당 이름을 설정하여 문화권을 사용합니다. TextFormat 속성을 사용하여 워드 랩(Word srap)의 줄 바꿈 규칙을 사용자 정의할 수 있습니다. 중국 문화권에서 SpreadJS는 한자 사이를 줄바꿈하므로 lineBreakingStrategy을 단어별로 줄 바꿈하도록 사용자 정의할 수 있습니다.
<template> <div class="sample-tutorial"> <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread"> <gc-worksheet> </gc-worksheet> </gc-spread-sheets> <div class="options-container"> <div class="option-row"> <label for="cultures">Culture: </label> </div> <div class="option-row"> <select id="cultures" style="width: 100%" @change="selectCulture"> </select> </div> </div> </div> </template> <script setup> import '@mescius/spread-sheets-vue'; import { ref, onMounted } from "vue"; import GC from "@mescius/spread-sheets"; import '@mescius/spread-sheets-resources-ko'; GC.Spread.Common.CultureManager.culture("ko-kr"); import cultureInfos from "sjs-globalization"; cultureInfos.forEach(function (cultureInfo) { GC.Spread.Common.CultureManager.addCultureInfo(cultureInfo.name(), cultureInfo); }) onMounted(() => { let culturesEle = document.getElementById("cultures"); ['en-us', 'zh-cn', 'ja-jp', 'ko-kr'].concat(cultureInfos).forEach(function (cultureInfo) { if (typeof cultureInfo === 'string') { cultureInfo = GC.Spread.Common.CultureManager.getCultureInfo(cultureInfo); } var optionEle = document.createElement("option"); optionEle.innerText = cultureInfo.name() + ": " + cultureInfo.displayName; optionEle.setAttribute("value", cultureInfo.name()); culturesEle.appendChild(optionEle); }); culturesEle.value = 'en-US'; }); const spreadRef = ref(null); const initSpread = (spread) => { spreadRef.value = spread; spread.suspendPaint(); initData(spread); spread.resumePaint(); selectCulture(); }; const initData = (spread) => { let symbolFormat = '¥#,##0.00'; let fullDateTimePattern = 'dddd, MMMM dd, yyyy h:mm:ss tt'; let shortDateTimePattern = 'dddd tt'; let sheet = spread.getActiveSheet(); sheet.options.allowCellOverflow = true; let table = sheet.tables.add("Table1", 2, 2, 8, 4, GC.Spread.Sheets.Tables.TableThemes.medium9); table.highlightFirstColumn(true); sheet.setColumnWidth(0, 20); sheet.setColumnWidth(1, 20); sheet.setColumnWidth(2, 80); sheet.setColumnWidth(3, 180); sheet.setColumnWidth(4, 180); sheet.setColumnWidth(5, 200); //header sheet.setValue(2, 2, "Names"); sheet.setValue(2, 3, "Sale"); sheet.setValue(2, 4, "Buy"); sheet.setValue(2, 5, "Total"); sheet.setValue(3, 2, "Cindy"); sheet.setValue(4, 2, "Wills"); sheet.setValue(5, 2, "Sara"); sheet.setValue(6, 2, "Faith"); sheet.setValue(7, 2, "Halley"); sheet.setValue(8, 2, "Ken"); sheet.setValue(9, 2, "Newell"); sheet.setValue(3, 3, 1089468.3); sheet.setValue(4, 3, 1078758.3); sheet.setValue(5, 3, 1094684.6); sheet.setValue(6, 3, 1034683.2); sheet.setValue(7, 3, 1013685.1); sheet.setValue(8, 3, 1013468.8); sheet.setValue(9, 3, 1034686.2); sheet.getCell(3, 3).formatter(symbolFormat); sheet.getCell(4, 3).formatter(symbolFormat); sheet.getCell(5, 3).formatter(symbolFormat); sheet.getCell(6, 3).formatter(symbolFormat); sheet.getCell(7, 3).formatter(symbolFormat); sheet.getCell(8, 3).formatter(symbolFormat); sheet.getCell(9, 3).formatter(symbolFormat); sheet.setValue(3, 4, 1094682.6); sheet.setValue(4, 4, 1094683.9); sheet.setValue(5, 4, 1016856.9); sheet.setValue(6, 4, 1046858.4); sheet.setValue(7, 4, 1034685.9); sheet.setValue(8, 4, 1074851.5); sheet.setValue(9, 4, 1034682.9); sheet.getCell(3, 4).formatter(symbolFormat); sheet.getCell(4, 4).formatter(symbolFormat); sheet.getCell(5, 4).formatter(symbolFormat); sheet.getCell(6, 4).formatter(symbolFormat); sheet.getCell(7, 4).formatter(symbolFormat); sheet.getCell(8, 4).formatter(symbolFormat); sheet.getCell(9, 4).formatter(symbolFormat); sheet.getCell(3, 5).formula("=D4+E4-100.1"); sheet.getCell(4, 5).formula("=D5+E5-100.1"); sheet.getCell(5, 5).formula("=D6+E6-100.1"); sheet.getCell(6, 5).formula("=D7+E7-100.1"); sheet.getCell(7, 5).formula("=D8+E8-100.1"); sheet.getCell(8, 5).formula("=D9+E9-100.1"); sheet.getCell(9, 5).formula("=D10+E10-100.1"); sheet.getCell(3, 5).formatter(symbolFormat); sheet.getCell(4, 5).formatter(symbolFormat); sheet.getCell(5, 5).formatter(symbolFormat); sheet.getCell(6, 5).formatter(symbolFormat); sheet.getCell(7, 5).formatter(symbolFormat); sheet.getCell(8, 5).formatter(symbolFormat); sheet.getCell(9, 5).formatter(symbolFormat); let table2 = sheet.tables.add("Table2", 12, 2, 5, 4, GC.Spread.Sheets.Tables.TableThemes.medium9); table2.highlightFirstColumn(true); sheet.setValue(12, 2, "Name"); sheet.setValue(12, 3, "Birthday"); sheet.setValue(12, 5, "Date"); sheet.setValue(13, 2, "Cindy"); sheet.setValue(14, 2, "Sara"); sheet.setValue(15, 2, "Faith"); sheet.setValue(16, 2, "Nami"); sheet.addSpan(12, 3, 1, 2); sheet.addSpan(13, 3, 1, 2); sheet.addSpan(14, 3, 1, 2); sheet.addSpan(15, 3, 1, 2); sheet.addSpan(16, 3, 1, 2); let mydate = new Date(); mydate.setFullYear(1984, 1, 21); let date; date = new Date("1984/01/21 15:32:26"); sheet.setValue(13, 3, date); sheet.setValue(13, 5, date); date = new Date("1991/08/17 21:36:52"); sheet.setValue(14, 3, date); sheet.setValue(14, 5, date); date = new Date("2008/08/08 08:08:08"); sheet.setValue(15, 3, date); sheet.setValue(15, 5, date); date = new Date("2014/01/01 0:00:00"); sheet.setValue(16, 3, date); sheet.setValue(16, 5, date); sheet.getCell(13, 3).formatter(fullDateTimePattern); sheet.getCell(14, 3).formatter(fullDateTimePattern); sheet.getCell(15, 3).formatter(fullDateTimePattern); sheet.getCell(16, 3).formatter(fullDateTimePattern); sheet.getCell(13, 5).formatter(shortDateTimePattern); sheet.getCell(14, 5).formatter(shortDateTimePattern); sheet.getCell(15, 5).formatter(shortDateTimePattern); sheet.getCell(16, 5).formatter(shortDateTimePattern); }; const selectCulture = () => { let spread = spreadRef.value; let sheet = spread.getActiveSheet(); spread.suspendPaint(); let cultureName = document.getElementById('cultures').value; GC.Spread.Common.CultureManager.culture(cultureName); let culture = GC.Spread.Common.CultureManager.getCultureInfo(cultureName); let symbolFormat; if (culture.predefinedFormats.Currency) { symbolFormat = culture.predefinedFormats.Currency[0]; } else { symbolFormat = culture.NumberFormat.currencySymbol; symbolFormat = '"' + symbolFormat + '"' + '#,##0.00'; } for (let row = 3; row <= 9; row++) { for (let col = 3; col <= 5; col++) { sheet.getCell(row, col).formatter(symbolFormat); } } spread.resumePaint(); }; </script> <style scoped> #app { height: 100%; } .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; 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; } </style>
<!DOCTYPE html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>SpreadJS VUE</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/vue3/node_modules/systemjs/dist/system.src.js"></script> <script src="$DEMOROOT$/spread/source/js/external/globalize.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/external/globalize.cultures.js" type="text/javascript"></script> <script src="./systemjs.config.js"></script> <script src="./compiler.js" type="module"></script> <script> var System = SystemJS; System.import("./src/app.js"); System.import('$DEMOROOT$/ko/lib/vue3/license.js'); </script> </head> <body> <div id="app"></div> </body> </html>
(function (global) { SystemJS.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, packageConfigPaths: [ './node_modules/*/package.json', "./node_modules/@mescius/*/package.json", "./node_modules/@babel/*/package.json", "./node_modules/@vue/*/package.json" ], map: { 'vue': "npm:vue/dist/vue.esm-browser.js", 'tiny-emitter': 'npm:tiny-emitter/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', "systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js", 'sjs-globalization': '$DEMOROOT$/spread/source/js/external/sjs-globalization/index.js', '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js', '@mescius/spread-sheets-resources-ko': 'npm:@mescius/spread-sheets-resources-ko/index.js', '@mescius/spread-sheets-resources-zh': 'npm:@mescius/spread-sheets-resources-zh/index.js', '@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js' }, meta: { '*.css': { loader: 'systemjs-plugin-css' }, '*.vue': { loader: "../plugin-vue/index.js" } } }); })(this);