报表插件（ReportSheet）实现绑定图片

收藏

本帖最后由 Ellia.Duan 于 2024-10-29 12:20 编辑

在一些报表场景中，需要添加图片，ReportSheet目前支持图片的展示：
https://demo.grapecity.com.cn/spreadjs/help/docs/features/reportsheet/template-sheet-setting/add-picture
具体可以看这篇文章，但是在一些场景中，后端返回的数据源包括一些图片链接，图片需要进行扩展时，我们应该如何设置呢？

SpreadJS支持Image函数。下面的方案主要是使用Image函数来解决。
一、设置数据源
比如说，当前有这样子的数据源：
image.png571014098.png

将其添加到dataManager中

let data = [
{
id: 1,
name: "张三",
age: 27,
sex: 0,
img: "https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/splogo.png"
},
{
id: 2,
name: "李四",
age: 31,
sex: 1,
img: "https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/splogo.png"
},
{
id: 3,
name: "小王",
age: 22,
sex: 1,
img: "https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/splogo.png"
},
{
id: 4,
name: "小韩",
age: 45,
sex: 0,
img: "https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/splogo.png"
},
{
id: 5,
name: "小明",
age: 25,
sex: 0,
img: "https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/splogo.png"
},
];
const ordersTable = spread.dataManager().addTable('person', {data});

复制代码

二、设置模板

const reportSheet = spread.addSheetTab(0, '报表1', GC.Spread.Sheets.SheetType.reportSheet);
const templateSheet = reportSheet.getTemplate();
templateSheet.getRange(0, 0, 2, 10).backColor('pink')
ordersTable.fetch().then(() => {
const columns = ['id', 'name', 'age', 'sex'];
columns.forEach((columnName, i) => {
templateSheet.setValue(0, i, columnName);
templateSheet.setTemplateCell(1, i, {
type: 'List',
binding: `person[${columnName}]`,
});
});
templateSheet.setTemplateCell(1, 4, {
type: 'List',
binding: `person[img]`,
});
templateSheet.setValue(0, 5, "图片")
templateSheet.setFormula(1, 5, "=image(E2)")
templateSheet.setColumnVisible(4, false)
reportSheet.refresh();
});

复制代码

在上述代码中，为E2单元格绑定了img字段，但是将E列隐藏，为F2设置公式"=image(E2)"
三、结果

image.png807546996.png

DEMO:

图片.html (8.13 KB, 下载次数: 6)

		自动登录	找回密码
密码			立即注册

报表插件（ReportSheet）实现绑定图片

0 个回复

SpreadJS 认证

SpreadJS 高级认证