报表的资源 -- 跳转、主题、内嵌图片等

ARJS是一款交互式能力非常丰富的报表，可以使用各种各样的主题，报表跳转，内嵌的图片供大家使用。

但是桌面端的直接在同级目录下，很多资源有了就会自动加载，但是作为一款纯前端的产品，大家肯定是想要在web端使用。
但是web端就会发现很多资源，包括跳转，主题这些的，我应该如何加载，不同于桌面端。没有办法扫描统计目录。那如果我们需要使用这些资源。应该如果实现呢。
今天就给大家说说 ARJS的web端资源使用方法。

首先需要明确一点，ARJS的所有文件本身其实都是以json格式存储和使用的，包括我们设计的报表模板，也是json格式的，ARJS本身会根据解析这些JSON然后加载渲染报表。无论是数据的展示还是别的，都是一样的，所有我们就知道，只要最终返回的是json就是了，但是我们使用的时候，又不能选择一个大json。肯定还是要通过一个名字，比如我们A报表，我无论是打开，或者跳转 ，都是选择的A，但是后台加载A对应的json就可以。

知道了这一点我们就知道，ARJS的资源配置基本都是前台使用看到和选择的都是key。然后根据key去发起一个网络请求，然后得到一个json的value。然后就可以加载这个json的value了。这个也就引出了我们提到的资源的使用和渲染。首先使用就是指设计的时候，我能选择到，比如我要在web端配置跳转，这个时候下拉框就得把我能跳转的报表自动列举出来，但是这个时候其实是不需要渲染的。真正渲染的时候是预览的时候，根据设计器设计的key，然后加载json即可。

好了，说了这么多其实就是为了给大家理清楚设计和查看的不同，我们要给设计器配置不同的资源，还要区分key。
但是查看器不用，只需要根据key，去找对应的json就行了。
那我们接下来就具体来说实现吧。

设计器
设计器我们存在哪些常用的资源选择呢。
报表、图片、主题(设计风格,一般也可以不用)
这几个就是我们一般需要选择的:
报表:
用来设计子报表组件，我们可以在下拉框中选择到所有可以用的子报表。同样假如我们设置单元格跳转，也可以在下拉框中选择到可以跳转的子报表。

图片:
用来使用的内嵌图片，在图片组件，背景，一般是常用的logo可以使用。不需要每次上传。
主题：
主题比较特殊，很多人都不知道，其实我们报表设计是有主题的，在有主题的时候，组件拖动进来就会以默认的主题色为底色，包括字体的格式等，都会根据主题走，而全局设置也有一个主题的选择:

一个好看的主题可以帮助我们设计报表事半功倍，

而且快速切换主题，可以做到快速切换设计的风格，这是因为我们配置主题后，背景色这些的，使用的就是主题颜色，而非固定颜色。
那么以上几个实现方法，也非常相似。参考链接
对应的三个方法:
[color=var(--link-color)]getReportsList、[color=var(--link-color)]getImagesList、[color=var(--link-color)]getThemesList
返回的就是对应类型的数组的对象即可。可以参考下面代码:

1. const getImages = () => {
   
2.     return Promise.resolve([{
   
3.         //id is important will be wrote as image value
   
4.         id: "resources/images/image.jpeg",
   
5.         displayName: "image.jpeg",
   
6.         mimeType: "image/jpeg",
   
7.         thumbnail: "***base64 string of image***"
   
8.     }])
   
9. }
   
10. 
    
11. const getReport = () => {
    
12.     return Promise.resolve([{
    
13.         id: "resources/reports/report.rdlx-json",
    
14.         displayName: "report.rdlx-json"
    
15.     }])
    
16. }
    
17. 
    
18. const themes = [
    
19.     {id: "resources/themes/theme1.json", displayName: "theme1"},
    
20.     {id: "resources/themes/theme2.json", displayName: "theme2"}
    
21. ];
    
22. 
    
23. 
    
24. const getTheme = (themeInfo) => {
    
25.     return fetch(themeInfo.id)
    
26.         .then(response => response.json())
    
27.         .then(content => ({
    
28.             id: themeInfo.id,
    
29.             displayName: themeInfo.displayName,
    
30.             info: content.Theme.Colors
    
31.         }))
    
32.     };
    
33. 
    
34. 
    
35. const getThemes = () => {
    
36.     return Promise.all(themes.map(getTheme));
    
37. };
    
38. 
    
39. 
    
40. var resourceProvider = {
    
41.     getImagesList: getImages,
    
42.     getReportsList: getReport,
    
43.     getThemesList: getThemes
    
44. }
    
45. 
    
46. 
    
47. designer.setResourceProvider(resourceProvider);

复制代码

可以看到，基本都是返回对应的对象数组.
报表：报表ID和名称。
图片：名称，类型(可忽略)和base64。
主题：id，名称，和一个info
因为主题需要设计直接使用到,所以需要返回具体的信息，而返回的结果可以参考如下:

1. {
   
2.     "Theme": {
   
3.         "Colors": {
   
4.             "Dark1": "#ffffff",
   
5.             "Dark2": "#f8f8f8",
   
6.             "Light1": "#1e1e37",
   
7.             "Light2": "#1a1b1f",
   
8.             "Accent1": "#1eebeb",
   
9.             "Accent2": "#1eb4f8",
   
10.             "Accent3": "#ffbf70",
    
11.             "Accent4": "#fd7192",
    
12.             "Accent5": "#4670ff",
    
13.             "Accent6": "#fa52e7",
    
14.             "Hyperlink": "#2b9de9",
    
15.             "HyperlinkFollowed": "#358ab6"
    
16.         },
    
17.         "Fonts": {
    
18.             "MajorFont": {
    
19.                 "Family": "微软雅黑",
    
20.                 "Style": "Normal",
    
21.                 "Size": "14pt",
    
22.                 "Weight": "Normal"
    
23.             },
    
24.             "MinorFont": {
    
25.                 "Family": "微软雅黑",
    
26.                 "Style": "Normal",
    
27.                 "Size": "10pt",
    
28.                 "Weight": "Normal"
    
29.             }
    
30.         }
    
31.     },
    
32.     "Images": [
    
33.         {
    
34.             "Name": "Logo",
    
35.             "MIMEType": "image/jpeg",
    
36.             "ImageData": "base64 String"
    
37.         }
    
38.     ]
    
39. }

复制代码

以上设计好后，我们的主题下拉选择框就可以直接选择。包括子报表的选择，就是上面返回的report的数组。依次类推。

查看器：
设计器其实很好理解的，其实基本就是json数组，可以选哪些，数组就有哪些。而查看器略有不同，但是按照之前的说法。就是把上面设计器选择好的json的那个对象，渲染出来即可。所以对应的方法也就只有一个，就是根据ID返回资源即可:

1. viewer.open(report.definition, {
   
2.       ResourceLocator: {
   
3.         getResource: async (resourceId) => {
   
4.          
   
5.           return result
   
6.         },
   
7.       },
   
8.     });

复制代码

可以看到，我们的参数就是一个resourceId。也就是设计器设计的ID，我们根绝ID去判断，当前是图片的话，返回图片资源，当前是主题的话，返回主题的json对象。
如果是报表的，返回对应的报表json即可。

至此，web端的资源设置就完成了，大家快去试试吧。
Demo可以参考这个:点击这里