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

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

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

将其添加到dataManager中

1. 
   
2. let data = [
   
3.             {
   
4.                 id: 1,
   
5.                 name: "张三",
   
6.                 age: 27,
   
7.                 sex: 0,
   
8.                 img: "https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/splogo.png"
   
9.             },
   
10.             {
    
11.                 id: 2,
    
12.                 name: "李四",
    
13.                 age: 31,
    
14.                 sex: 1,
    
15.                 img: "https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/splogo.png"
    
16.             },
    
17.             {
    
18.                 id: 3,
    
19.                 name: "小王",
    
20.                 age: 22,
    
21.                 sex: 1,
    
22.                 img: "https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/splogo.png"
    
23.             },
    
24.             {
    
25.                 id: 4,
    
26.                 name: "小韩",
    
27.                 age: 45,
    
28.                 sex: 0,
    
29.                 img: "https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/splogo.png"
    
30.             },
    
31.             {
    
32.                 id: 5,
    
33.                 name: "小明",
    
34.                 age: 25,
    
35.                 sex: 0,
    
36.                 img: "https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/images/splogo.png"
    
37.             },
    
38.         ];
    
39.         const ordersTable = spread.dataManager().addTable('person', {data});

复制代码

二、设置模板

1. 
   
2. const reportSheet = spread.addSheetTab(0, '报表1', GC.Spread.Sheets.SheetType.reportSheet);
   
3. const templateSheet = reportSheet.getTemplate();
   
4. templateSheet.getRange(0, 0, 2, 10).backColor('pink')
   
5. ordersTable.fetch().then(() => {
   
6.             const columns = ['id', 'name', 'age', 'sex'];
   
7.             columns.forEach((columnName, i) => {
   
8.                 templateSheet.setValue(0, i, columnName);
   
9.                 templateSheet.setTemplateCell(1, i, {
   
10.                     type: 'List',
    
11.                     binding: `person[${columnName}]`,
    
12.                 });
    
13.             });
    
14.             templateSheet.setTemplateCell(1, 4, {
    
15.                 type: 'List',
    
16.                 binding: `person[img]`,
    
17.             });
    
18.             templateSheet.setValue(0, 5, "图片")
    
19.             templateSheet.setFormula(1, 5, "=image(E2)")
    
20.             templateSheet.setColumnVisible(4, false)
    
21. 
    
22.             reportSheet.refresh();
    
23. 
    
24. 
    
25.         });

复制代码

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





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

2024-10-29 12:06 上传

点击文件名下载附件