概述
本示例展示了 SpreadJS 中 VALUETOTEXT 和 ARRAYTOTEXT 两个函数的实际用法，用来把单个值或一个数组区域转换成文本结果。
示例通过两张工作表分别演示“值转文本”和“数组转文本”，并在每张表中同时给出公式本身与计算结果，便于对比简洁格式和严格格式的差异。
实现思路
页面加载后创建 Workbook，并开启动态数组支持。
通过一个 data 配置数组统一描述工作表名称、单元格内容和列宽。
第一张工作表使用 VALUETOTEXT 展示布尔值、数字、文本和公式结果在两种格式下的文本输出。
第二张工作表使用 ARRAYTOTEXT 把二维区域一次性转换为文本，并对比两种返回格式。
通过通用的 setCells 和 setColumnsWidth 方法批量写入数据、公式和样式，减少重复代码。
代码解析
示例入口先创建工作簿，开启动态数组，然后初始化样式和工作表内容：
所有演示数据都放在 data 数组中。每一项对应一张工作表，包含工作表名称、单元格矩阵和列宽配置：
initSpread 会遍历配置，为每张工作表依次设置名称、写入单元格内容并应用列宽：
单元格写入逻辑做了统一封装：如果是带 v 和 s 的对象就分别写值和样式；如果字符串以 = 开头就当作公式；否则按普通值写入。这也是示例能同时铺设数据区、标题区和公式区的关键：
示例还定义了一个名为 title 的命名样式，用来统一标题和表头的视觉效果：
运行效果
工作簿打开后会显示两张工作表，分别对应 VALUETOTEXT 和 ARRAYTOTEXT 的示例。
“值转文本”工作表会对布尔值、数字、文本、公式结果等不同类型的数据，分别展示 format=0 和 format=1 的输出差异。
“数组转文本”工作表会把一个二维数据区域整体转换为文本，并对比简洁格式与严格格式的返回结果。
标题、表头、公式和结果会直接铺在工作表中，便于横向对照每个函数的输入与输出。
API 参考
spread.options.allowDynamicArray = true
用于开启动态数组支持，确保数组相关公式在工作表中的行为符合预期。
sheet.setFormula(row, col, formula)
用于将以 = 开头的字符串写入为公式，而不是普通文本。
workbook.addNamedStyle(style)
用于注册命名样式，随后可在单元格对象中通过样式名复用。
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(_getElementById("ss"));
spread.options.allowDynamicArray = true;
initStyles(spread);
initSpread(spread);
};
var data = [
{
sheetName: '值转文本',
cells: [
[{v:"数据",s:"title"}],
[true],
[1234.01234],
["你好"],
[`="Hello" + 1`],
["西雅图"],
[1234],
[],
[{v:"简洁格式公式",s:"title"}, {v:"简洁格式结果",s:"title"}, {v:"严格格式公式",s:"title"}, {v:"严格格式结果",s:"title"}],
["=FORMULATEXT(B10)", "=VALUETOTEXT(A2,0)", "=FORMULATEXT(D10)", "=VALUETOTEXT(A2,1)"],
["=FORMULATEXT(B11)", "=VALUETOTEXT(A3,0)", "=FORMULATEXT(D11)", "=VALUETOTEXT(A3,1)"],
["=FORMULATEXT(B12)", "=VALUETOTEXT(A4,0)", "=FORMULATEXT(D12)", "=VALUETOTEXT(A4,1)"],
["=FORMULATEXT(B13)", "=VALUETOTEXT(A5,0)", "=FORMULATEXT(D13)", "=VALUETOTEXT(A5,1)"],
["=FORMULATEXT(B14)", "=VALUETOTEXT(A6,0)", "=FORMULATEXT(D14)", "=VALUETOTEXT(A6,1)"],
["=FORMULATEXT(B15)", "=VALUETOTEXT(A7,0)", "=FORMULATEXT(D15)", "=VALUETOTEXT(A7,1)"],
],
columnsWidth: [200, 200, 200, 200]
},
{
sheetName: '数组转文本',
cells: [
[{v:"数据",s:"title"}, ""],
[true, `="Hello" + 1`],
[1234.01234, "西雅图"],
["你好", 1123],
[],
[{v:"公式",s:"title"}, {v:"结果",s:"title"}, {v:"公式",s:"title"}, {v:"结果",s:"title"}],
["=FORMULATEXT(B7)", "=ARRAYTOTEXT(A2:B4,0)", "=FORMULATEXT(D7)", "=ARRAYTOTEXT(A2:B4,1)"],
],
columnsWidth: [180, 280, 180, 280]
}
];
function initSpread(workbook) {
workbook.suspendPaint();
workbook.suspendCalcService();
workbook.setSheetCount(data.length);
for (var i = 0; i < data.length; i++) {
var sheetData = data[i];
var sheet = workbook.sheets[i];
sheet.name(sheetData.sheetName);
setCells(sheet, sheetData.cells, 0, 0);
setColumnsWidth(sheet, sheetData.columnsWidth);
}
workbook.resumeCalcService();
workbook.resumePaint();
}
function initStyles(workbook) {
var style = new GC.Spread.Sheets.Style();
style.name = 'title';
style.font = 'normal bold 16px Segoe UI';
style.foreColor = "#172b4d";
workbook.addNamedStyle(style);
}
function setCells(sheet, cells, rowIndex, colIndex) {
for(var i = 0; i < cells.length; i++) {
var row = cells[i];
var r = rowIndex + i;
for (var j = 0; j < row.length; j++) {
var cell = row[j];
var c = colIndex + j;
if (typeof cell === "object") {
if (cell.v !== undefined) {
sheet.setValue(r, c, cell.v);
}
if (cell.s !== undefined) {
sheet.setStyle(r, c, cell.s)
}
} else if (typeof cell === 'string' && cell[0] === '=') {
sheet.setFormula(r, c, cell);
} else {
sheet.setValue(r, c, cell);
}
}
}
}
function setColumnsWidth(sheet, columnsWidth) {
if (!columnsWidth) {
return;
}
for (var i = 0; i < columnsWidth.length; i++) {
sheet.setColumnWidth(i, columnsWidth[i]);
}
}
function _getElementById(id) {
return document.getElementById(id);
}
<!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" />
<meta name="spreadjs culture" content="zh-cn" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
}
