SpreadJS是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，具有 “高性能、跨平臺、與 Excel 高度兼容”的產(chǎn)品特性， 為用戶帶來親切的 Excel 使用體驗的同時，滿足 Web Excel 組件開發(fā)、表格文檔協(xié)同編輯、數(shù)據(jù)填報、Excel 類報表設(shè)計等業(yè)務(wù)場景，極大降低了企業(yè)研發(fā)成本和項目交付風(fēng)險。

點擊下載SpreadJS最新試用版

添加水印

水印指的是，當(dāng)單元格的值為空時，顯示的內(nèi)容。

你可以為單元格設(shè)置如下水印。

要添加水印，你需要：

1. 創(chuàng)建一個Style的實例；
2. 設(shè)置該實例的watermark屬性；
3. 使用setStyle方法將該實例設(shè)置到單元格，列和行中。

水印文字不會溢出到該單元格的外面。

示例代碼

此代碼將會在 B1 和 B2 單元格中設(shè)置水印。

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

單元格內(nèi)邊距和標簽

你可以設(shè)置單元格內(nèi)邊距，字體，前景色，對齊和是否可見等。

使用cellPadding來設(shè)置單元格的內(nèi)邊距。

示例代碼

以下代碼給一個單元格設(shè)置了標簽（watermark），并給單元格設(shè)置了一個內(nèi)邊距。

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

你可以設(shè)置單元格的對齊方式和縮進。

單元格對齊有兩個方向：

1. 水平對齊（hAlign方法），
2. 垂直對齊（vAlign方法）。

你可以使用textIndent來設(shè)置單元格內(nèi)容的縮進方式。

以下代碼給 B2 單元格設(shè)置了水平方向和垂直方向的對齊方式，給 B3 單元格設(shè)置了縮進。

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