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

下載最新版SpreadJS

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

你可以設(shè)置 backColor 或者 backgroundImage 選項(xiàng)為每一個(gè)表單設(shè)置背景色或者背景圖片。如果你同時(shí)設(shè)置背景色和背景圖片, 那么背景圖片將會(huì)優(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 **選項(xiàng)為工作表設(shè)置背景圖像。請(qǐng)注意，設(shè)置背景圖像會(huì)覆蓋所有設(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 選項(xiàng)來完成此目標(biāo)。圖片布局包含以下幾種類型:

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

    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 選項(xiàng)來設(shè)置表單灰色區(qū)域的背景色。

spread.options.grayAreaBackColor = 'gray';

本文轉(zhuǎn)載自：

立即下載最新版純前端表格控件SpreadJS體驗(yàn)吧！