Syntax
text - (Required) The text or a reference to a cell that contains the text you want to change. If text does not contain any full-width letters, text is not changed.
Usage Notes
This function can convert full width letter symbol, letter and katakana to half width characters.
Support Case
Support Item
Example Character
Target Character
Full-width Letter
ＳｐｒｅａｄＪＳ
SpreadJS
Full-width symbol
！＠＃＄
!@#$
Full-width katakana
グループシテイ
ｸﾞﾙｰﾌﾟｼﾃｲ
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet>
</gc-worksheet>
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
</div>
</template>
<script setup>
import '@mescius/spread-sheets-vue';
import { ref } from "vue";
import GC from "@mescius/spread-sheets";
const spreadRef = ref(null);
let initSpread = function (spread) {
spreadRef.value = spread;
spread.suspendPaint();
let sheet0 = spread.getSheet(0);
sheet0.name("ASC usage");
setUsage(sheet0);
let sheet1 = spread.getSheet(1);
sheet1.name("ASC table");
setASCformulaInSheet(sheet1);
spread.resumePaint();
}
let setUsage = function (sheet) {
setTable(sheet);
sheet.setValue(3, 2, "Furigana (pronunciation of kanji name)");
sheet.setValue(4, 2, "Address");
sheet.setValue(5, 2, "Phone number");
sheet.setValue(6, 2, "Postal code");
sheet.setValue(3, 3, "ブドウ タロウ");
sheet.setValue(4, 3, "紫山３－１－４");
sheet.setValue(5, 3, "０２２－７７７－８２１０");
sheet.setValue(6, 3, "９８１－３２０５");
setFormula(sheet);
}
let setTable = function (sheet) {
sheet.tables.add("DBCS", 2, 2, 5, 3);
sheet.setColumnWidth(2, 165);
sheet.setColumnWidth(3, 165);
sheet.setColumnWidth(4, 185);
sheet.setRowHeight(3, 50);
sheet.setRowHeight(4, 50);
sheet.setRowHeight(5, 50);
sheet.setRowHeight(6, 50);
sheet.setValue(2, 2, "Usage");
sheet.setValue(2, 3, "Example Characters");
sheet.setValue(2, 4, "Target Characters");
let style = new GC.Spread.Sheets.Style();
style.wordWrap = true;
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
sheet.setStyle(3, 2, style);
sheet.setStyle(4, 2, style);
sheet.setStyle(5, 2, style);
sheet.setStyle(6, 2, style);
}
let setFormula = function (sheet) {
sheet.setFormula(3, 4, "=ASC(D4)");
sheet.setFormula(4, 4, "=ASC(D5)");
sheet.setFormula(5, 4, "=ASC(D6)");
sheet.setFormula(6, 4, "=ASC(D7)");
sheet.setFormula(7, 4, "=ASC(D8)");
sheet.setFormula(8, 4, "=ASC(D9)");
sheet.setFormula(9, 4, "=ASC(D10)");
sheet.setFormula(10, 4, "=ASC(D11)");
}
let setASCformulaInSheet = function (sheet) {
let charCode = 12449;
let rowIndexOffset = 1;
sheet.setValue(0, 0, "Full width katakana:");
setASC(sheet, rowIndexOffset, charCode, 90); //FULL width katakana
charCode = 65281;
rowIndexOffset += 6;
sheet.addSpan(6, 0, 1, 4);
sheet.setValue(6, 0, "Full width symbol and letter:");
setASC(sheet, rowIndexOffset, charCode, 94); // FW symbol and letter
}
let setASC = function (sheet, rowIndexOffset, charCodeStart, count) {
let str = "",
i = 0;
for (i; i < count; i++) {
str = String.fromCharCode(charCodeStart + i);
let rowIndex = Math.floor(i / 20) + rowIndexOffset;
let columnIndex = i % 20;
sheet.setFormula(rowIndex, columnIndex, `=ASC("${str}")`);
}
}
</script>
<style scoped>
#app {
height: 100%;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
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;
}
#switchAutoMergeMode {
margin: 10px 0px;
}
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$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></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$/en/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",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-en': 'npm:@mescius/spread-sheets-resources-en/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);
