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");