SpreadJS是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受以華為、蘇寧易購、天弘基金等為代表的企業用戶青睞。SpreadJS 為用戶帶來親切的 Excel 使用體驗的同時，滿足 Web Excel 組件開發、表格文檔協同編輯、數據填報、Excel 類報表設計等業務場景，極大降低了企業研發成本和項目交付風險。

點擊下載SpreadJS最新試用版

你可以在頁面上創建自定義浮動對象元素。

你可以在浮動對象元素中放置一個 HTML 元素，下圖演示了，在浮動對象元素中放置一個 HTML 的按鈕：

你可以設定浮動對象元素是否可見（isVisible）或者鎖定（isLocked）。isLocked方法僅在表格受保護的時候可用。當行和列調節大小時，浮動對象元素的位置和大小會隨著變化。當然，你可以使用dynamicMove方法來固定該元素的位置，使用 dynamicSize方法來固定元素的大小。

fixedPosition方法為true時，dynamicMove和dynamicSize方法將會被禁用。此時，元素的位置將會固定在視口中保持不變，即不會隨視口滾動，行和列的隱藏、顯示、調整大小和移動的改變而改變，并且可以使用使用鼠標改變其位置和大小。

以下屬性會正常工作，不會受到fixedPosition方法的影響

• endColumn
• endColumnOffset
• endRow
• endRowOffset
• height
• startColumn
• startColumnOffset
• startRow
• startRowOffset
• width
• x
• y

你可以使用鼠標拖動來改變元素的位置，或者調整元素的大小。 你也可以使用 x, 和 y方法來設置元素的尺寸和位置。 你可以使startColumn和方法通過單元格來定位元素。你也可以使用startColumnOffset和startRowOffset方法設置元素與 起始行（Start Row）和起始列（Start Column的距離。同樣道理， endColumn, endRow, endColumnOffset,和endRowOffset 方法你也可以使用。

下圖展示了 startColumn, startRow,startColumnOffset和startColumn,startRow,startColumnOffset 分別代表了哪些值：

你可以通過鼠標左鍵或右鍵選擇浮動對象元素，同時我們也提供了 isSelected方法供你使用。
你可以使用 Tab 鍵或者 Shift + Tab 鍵在不同的浮動對象元素之間進行切換。
你可以按住 Ctrl +鼠標左鍵或者 Shift來進行對浮動對象元素的多選。
你可以通過快捷鍵對浮動對象元素進行剪切， 復制和粘貼；同時你也可以撤銷和重做你對浮動對象元素的操作。

示例代碼

以下代碼在表格中加入了一個浮動對象元素。

var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);

你可以給 Spread.Sheets 創建浮動圖片，如下圖所示：

你可以使用Picture類來設置浮動圖片的設置背景顏色，邊框和拉伸

你可以使用鼠標左鍵和右鍵來選中浮動圖片。

你可以使用 Tab 和 Shift + Tab 在多個浮動圖片中切換選中狀態。

你可以使用 Ctrl + 鼠標左鍵 或者 Shift + 鼠標左鍵進行多選。

你可以使用快捷鍵剪切，復制和粘貼浮動圖片，當然，該操作可以被撤銷和重做。

示例代碼

以下代碼使用 pictures.add方法創建了一個浮動圖片：

activeSheet.pictures.add("f2","tsoutline.png",100,60,200,100);