SpreadJS 图片绑定
SpreadJS支持双向数据绑定，可以快速实现填报和报表需求。在报表中，展示图片也是常见需求，那么如何将数据字段中的图片链接展示为图片呢？
目前SpreadJS可以通过浮动图片，单元格背景以及V14Update1中新增的图片迷你图三种方式显示图片。再结合一定的开发，即可实现绑定图片的需求。
方法一：图片迷你图引用绑定路径单元格
参考图片迷你图实例，将含有链接的列隐藏，展示图片单元格使用IMAGE引用隐藏单元格。
优点：不需要代码开发，只要在设计模板时使用些小技巧即可
缺点：模板设计人员需要学习设计方法，合理安排隐藏单元格位置；Excel不支持函数迷你图，导出Excel显示#NAME
方法二：绑定后遍历添加图片
在模板设计时，给单元格tag加上特殊标记，数据绑定完成后遍历单元格，查找标记，在单元格位置插入浮动图片。
优点：浮动图片可以导出Excel
缺点：模板设计时候要打标记；插入浮动图片需要考虑合并单元格的影响
方法三：自定义图片单元格
自定义图片单元格，在自定义单元格paint实现中设置参数的style添加backgroundImage属性值为单元格value，value参数传递空。在单元格中显示图片
优点：使用单元格类型设置图片更直观，和Checkbox等方式一致。
缺点：单元格类型无法导出Excel
大家可以根据自己项目实际需求选择合适的方式添加图片
本帖最后由 Richard.Huang 于 2023-8-9 18:03 编辑
再提供两种解决方案
1. 通过对单元格设定格式来实现图片的绑定
设置模板
https://docs.grapecity.com.cn/DOCUMENT_SITE_LINK_PREFIX_HERE/document-site-files/images/b33c4f64-6b99-4132-a675-8dc7b59765f1/image.582607.png
设置自定义单元格格式=image(@)
https://docs.grapecity.com.cn/DOCUMENT_SITE_LINK_PREFIX_HERE/document-site-files/images/b33c4f64-6b99-4132-a675-8dc7b59765f1/image.54ebb4.png
绑定数据展示结果
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);
https://docs.grapecity.com.cn/DOCUMENT_SITE_LINK_PREFIX_HERE/document-site-files/images/b33c4f64-6b99-4132-a675-8dc7b59765f1/image.682d96.png
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种实现方式我都放在了附件，欢迎大家交流
页:
[1]