SpreadJS 图片绑定

SpreadJS支持双向数据绑定，可以快速实现填报和报表需求。
在报表中，展示图片也是常见需求，那么如何将数据字段中的图片链接展示为图片呢？
目前SpreadJS可以通过浮动图片，单元格背景以及V14Update1中新增的图片迷你图三种方式显示图片。再结合一定的开发，即可实现绑定图片的需求。

方法一：图片迷你图引用绑定路径单元格
参考图片迷你图实例，将含有链接的列隐藏，展示图片单元格使用IMAGE引用隐藏单元格。
优点：不需要代码开发，只要在设计模板时使用些小技巧即可
缺点：模板设计人员需要学习设计方法，合理安排隐藏单元格位置；Excel不支持函数迷你图，导出Excel显示#NAME

方法二：绑定后遍历添加图片
在模板设计时，给单元格tag加上特殊标记，数据绑定完成后遍历单元格，查找标记，在单元格位置插入浮动图片。
优点：浮动图片可以导出Excel
缺点：模板设计时候要打标记；插入浮动图片需要考虑合并单元格的影响

方法三：自定义图片单元格
自定义图片单元格，在自定义单元格paint实现中设置参数的style添加backgroundImage属性值为单元格value，value参数传递空。在单元格中显示图片
优点：使用单元格类型设置图片更直观，和Checkbox等方式一致。
缺点：单元格类型无法导出Excel


大家可以根据自己项目实际需求选择合适的方式添加图片

再提供两种解决方案

1. 通过对单元格设定格式来实现图片的绑定
设置模板

设置自定义单元格格式=image(@)



绑定数据展示结果
var dataAddress = {
    grapecityPic:'https://www.grapecity.com.cn/en/favicon/favicon-32x32.png',
    baiduPic:'https://www.baidu.com/favicon.ico',
    biligamePic:'https://s1.hdslb.com/bfs/seed/game-web/duang/header/images/biligame-logo-w200.e54786d.svg'
}


let source = new GC.Spread.Sheets.Bindings.CellBindingSource(dataAddress);
sheet.setDataSource(source);



2. 通过自定义单元格格式在paint过程中添加浮动图片

ImageCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
    GC.Spread.Sheets.CellTypes.Base.prototype.paint.call(this, ctx, value, x, y, w, h, style, options)
    let { sheet, row, col } = options
    if (sheet.getTag(row, col) !== 'painted' && value) {// 控制重绘方法的范围，如果单元格被设置成了“painted”或者图片链接没有给则不会执行该方法
        if (!(sheet.shapes.get(this.picType))) {
            // 添加浮动图片
            let pic = sheet.shapes.addPictureShape(this.picType, value, 0, 0, 100, 100)
            // 如果判断单元格是否是合并的单元格
            let span = sheet.getSpan(row, col)
            let rowCount = 1
            let colCount = 1
            if (span) {
                rowCount = span.rowCount
                colCount = span.colCount
            }
            // 浮动图片起始行
            pic.startRow(row)
            // 浮动图片结束行
            pic.endRow(row + rowCount)
            // 浮动图片起始列
            pic.startColumn(col)
            // 浮动图片结束列
            pic.endColumn(col + colCount)
            // 禁止图片移动
            pic.allowMove(false)
        } else {
            let pic = sheet.shapes.get(this.picType)
            pic.src(value)
        }
        sheet.setTag(row, col, 'painted')// 防止反复绘制
    }
}

包括楼主在内的5种实现方式我都放在了附件，欢迎大家交流