纯前端控件SpreadJS教程：如何自定义工作薄背景？

纯前端表格控件SpreadJS，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、苏宁易购、天弘基金等行业龙头企业的青睐。此示例显示如何自定义工作簿背景。

此示例显示如何自定义工作簿背景

你可以设置 backColor 或者 backgroundImage 选项为每一个表单设置背景色或者背景图片。如果你同时设置背景色和背景图片, 那么背景图片将会优先显示。

    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 **选项为工作表设置背景图像。请注意，设置背景图像会覆盖所有设置的背景颜色，因此必须将其删除才能使背景颜色生效。

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

SpreadJS 提供控制图片布局方式的能力, 你可以设置 backgroundImageLayout 选项来完成此目标。图片布局包含以下几种类型:

• stretch: 改变图像尺寸使其充满整个区域,无视实际的长宽比。
• center: 图片将显示在区域的正中央。
• zoom: 改变图像的尺寸使其适合控件尺寸,图片实际的长宽比不变。
• none: 在显示区域中使用图像实际的尺寸显示该图像,没有任何尺寸变化。

    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;  

你也可以设置 grayAreaBackColor 选项来设置表单灰色区域的背景色。

spread.options.grayAreaBackColor = 'gray';

立即下载最新版纯前端表格控件SpreadJS体验吧！

标签：