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

登录

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
返回的就是对应类型的数组的对象即可。可以参考下面代码:

const getImages = () => {
return Promise.resolve([{
//id is important will be wrote as image value
id: "resources/images/image.jpeg",
displayName: "image.jpeg",
mimeType: "image/jpeg",
thumbnail: "***base64 string of image***"
}])
}
const getReport = () => {
return Promise.resolve([{
id: "resources/reports/report.rdlx-json",
displayName: "report.rdlx-json"
}])
}
const themes = [
{id: "resources/themes/theme1.json", displayName: "theme1"},
{id: "resources/themes/theme2.json", displayName: "theme2"}
];
const getTheme = (themeInfo) => {
return fetch(themeInfo.id)
.then(response => response.json())
.then(content => ({
id: themeInfo.id,
displayName: themeInfo.displayName,
info: content.Theme.Colors
}))
};
const getThemes = () => {
return Promise.all(themes.map(getTheme));
};
var resourceProvider = {
getImagesList: getImages,
getReportsList: getReport,
getThemesList: getThemes
}
designer.setResourceProvider(resourceProvider);

复制代码

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

{
"Theme": {
"Colors": {
"Dark1": "#ffffff",
"Dark2": "#f8f8f8",
"Light1": "#1e1e37",
"Light2": "#1a1b1f",
"Accent1": "#1eebeb",
"Accent2": "#1eb4f8",
"Accent3": "#ffbf70",
"Accent4": "#fd7192",
"Accent5": "#4670ff",
"Accent6": "#fa52e7",
"Hyperlink": "#2b9de9",
"HyperlinkFollowed": "#358ab6"
},
"Fonts": {
"MajorFont": {
"Family": "微软雅黑",
"Style": "Normal",
"Size": "14pt",
"Weight": "Normal"
},
"MinorFont": {
"Family": "微软雅黑",
"Style": "Normal",
"Size": "10pt",
"Weight": "Normal"
}
}
},
"Images": [
{
"Name": "Logo",
"MIMEType": "image/jpeg",
"ImageData": "base64 String"
}
]
}

复制代码

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

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

viewer.open(report.definition, {
ResourceLocator: {
getResource: async (resourceId) => {
return result
},
},
});

复制代码

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

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

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

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

本帖子中包含更多资源

0 个回复

Wyn高级认证

Wyn认证