SpreadJS是一款基于 HTML5 的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，具有 “高性能、跨平台、与 Excel 高度兼容”的产品特性， 为用户带来亲切的 Excel 使用体验的同时，满足 Web Excel 组件开发、表格文档协同编辑、数据填报、Excel 类报表设计等业务场景，极大降低了企业研发成本和项目交付风险。

点击下载SpreadJS最新试用版

添加水印

水印指的是，当单元格的值为空时，显示的内容。

你可以为单元格设置如下水印。

要添加水印，你需要：

1. 创建一个Style的实例；
2. 设置该实例的watermark属性；
3. 使用setStyle方法将该实例设置到单元格，列和行中。

水印文字不会溢出到该单元格的外面。

示例代码

此代码将会在 B1 和 B2 单元格中设置水印。

var type = new GC.Spread.Sheets.Style();
type.watermark = "User name";sheet.setStyle(0, 1, type);
var type = new GC.Spread.Sheets.Style();
type.watermark = "Password";sheet.setStyle(1, 1, type);

单元格内边距和标签

你可以设置单元格内边距，字体，前景色，对齐和是否可见等。

使用cellPadding来设置单元格的内边距。

示例代码

以下代码给一个单元格设置了标签（watermark），并给单元格设置了一个内边距。

var type = new GC.Spread.Sheets.Style();
type.watermark = "User name";
type.cellPadding = "20";
type.labelOptions = {alignment:GC.Spread.Sheets.LabelAlignment.topLeft, visibility: GC.Spread.Sheets.LabelVisibility.visible};
activeSheet.setStyle(0, 1, type);
activeSheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).height(60);
activeSheet.getRange(-1, 1, -1, 1).width(150);
var combo = new GC.Spread.Sheets.CellTypes.ComboBox();
combo.items([{ text: "Oranges", value: "11k" }, { text: "Apples", value: "15k" }, { text: "Grape", value: "100k" }]);
combo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text);
activeSheet.setCellType(2, 1, combo, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport).watermark("ComboBox Cell Type").cellPadding('10 10 20 10');
activeSheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport).labelOptions({alignment: GC.Spread.Sheets.LabelAlignment.bottomCenter, foreColor: 'yellowgreen', font: 'bold 15px Arial'});
activeSheet.getRange(2, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport).height(60);

你可以设置单元格的对齐方式和缩进。

单元格对齐有两个方向：

1. 水平对齐（hAlign方法），
2. 垂直对齐（vAlign方法）。

你可以使用textIndent来设置单元格内容的缩进方式。

以下代码给 B2 单元格设置了水平方向和垂直方向的对齐方式，给 B3 单元格设置了缩进。

// Set the horizontal and vertical alignment to center
var cell = activeSheet.getCell(1, 1, GC.Spread.Sheets.SheetArea.viewport);
cell.hAlign(GC.Spread.Sheets.HorizontalAlign.center);
cell.vAlign(GC.Spread.Sheets.VerticalAlign.center);
cell.value("Alignment");
// Indent the string.
cell = activeSheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport);
cell.textIndent(2);
cell.value("Indent");

如果你对我们的产品感兴趣或者有任何疑问，欢迎咨询慧都在线客服>>