SpreadJS支持給工作簿添加背景圖，也支持給某一個單元格設置背景圖。

點擊獲取SpreadJS工具下載

有小伙伴有這樣的需求：給一片單元格區域設置背景圖，這該如何實現呢？

方案1：將這片單元格區域設置合并單元格，然后給這個合并單元格設置背景圖。

sheet.getCell(0,0).backgroundImage("http://gcdn.grapecity.com.cn/uc_server/avatar.php?uid=52354&size=middle")

方案二：通過自定義單元格實現。

創建自定義單元格類型：

function WaterMarkCellType() {
this.typeName = "WaterMarkCellType"
}
WaterMarkCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
WaterMarkCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
//Paints a cell on the canvas.
var background = style.backgroundImage;
style.backgroundImage = undefined;
GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, arguments)
GC.Spread.Sheets.CellTypes.Text.prototype.paint.call(this, ctx, undefined, x, y, w+100, h+100, {backgroundImage:background}, options)
};

給單元格區域的左上角單元格設置此單元格類型，背景圖片由此繪制。

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
sheet.getCell(3, 3).cellType(new WaterMarkCellType()).backgroundImage('//www.grapecity.com.cn/images/metalsmith/home/logo_spjs.png')

sheet.setArray(2, 2, [[1,2,3,4,5,6,],[1,2,3,4,5,6,],[1,2,3,4,5,6,],[1,2,3,4,5,6,],[1,2,3,4,5,6,],[1,2,3,4,5,6,]])

解決滑動滾動條時，圖片未完全繪制的問題。

原因：

由于Demo中是把單個單元格中的背景圖進行了放大繪制，而當滾動條滾動到目標單元格下方時，目標單元格并未被繪制，此時就會出現問題。

解決辦法是添加滾動條事件，在事件中注冊setTimeout，將sheet重繪即可。setTimeout時間應控制在不影響視覺效果的情況下盡量長一些。

var setTimeoutId = null;
sheet.bind(GC.Spread.Sheets.Events.TopRowChanged, function (s, e) {
clearTimeout(setTimeoutId);
// 這里的間隔時間，在不影響視覺效果的情況下盡可能長一點
setTimeoutId = setTimeout(function(){
e.sheet.repaint();
}, 50);
});

最終效果如下圖：

SpreadJS | 下載試用

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

本文轉載自