純前端表格控件SpreadJS，兼容 450 種以上的 Excel 公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產(chǎn)品特性，備受華為、蘇寧易購、天弘基金等行業(yè)龍頭企業(yè)的青睞，并被中國軟件行業(yè)協(xié)會認定為“中國優(yōu)秀軟件產(chǎn)品”。SpreadJS 可為用戶提供類 Excel 的功能，滿足表格文檔協(xié)同編輯、 數(shù)據(jù)填報、 類 Excel 報表設(shè)計等業(yè)務場景需求，極大的降低企業(yè)研發(fā)成本和項目交付風險。

下載最新版SpreadJS

此示例顯示如何自定義工作簿背景

你可以設(shè)置 backColor 或者 backgroundImage 選項為每一個表單設(shè)置背景色或者背景圖片。如果你同時設(shè)置背景色和背景圖片, 那么背景圖片將會優(yōu)先顯示。

    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));      // set the worksheet's backcolor      spread.options.backColor = 'red';      // and set the surrounding area      spread.options.grayAreaBackColor = 'gray';  

或者，您可以使用workbook的** backgroundImage **選項為工作表設(shè)置背景圖像。請注意，設(shè)置背景圖像會覆蓋所有設(shè)置的背景顏色，因此必須將其刪除才能使背景顏色生效。

    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));      // Set a background image for the sheets      spread.options.backgroundImage = 'images/backImage.png';  

SpreadJS 提供控制圖片布局方式的能力, 你可以設(shè)置 backgroundImageLayout 選項來完成此目標。圖片布局包含以下幾種類型:

• stretch: 改變圖像尺寸使其充滿整個區(qū)域,無視實際的長寬比。
• center: 圖片將顯示在區(qū)域的正中央。
• zoom: 改變圖像的尺寸使其適合控件尺寸,圖片實際的長寬比不變。
• none: 在顯示區(qū)域中使用圖像實際的尺寸顯示該圖像,沒有任何尺寸變化。

    spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.stretch;      //spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.center;      //spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.zoom;      //spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.none;  

你也可以設(shè)置 grayAreaBackColor 選項來設(shè)置表單灰色區(qū)域的背景色。

spread.options.grayAreaBackColor = 'gray';

本文轉(zhuǎn)載自：

立即下載最新版純前端表格控件SpreadJS體驗吧！