ARJS-Demo分享

登录

本帖最后由 Felix.Li 于 2024-1-31 10:07 编辑

分享一个示例Demo。作为纯前端的报表示例设计器。只需要简单的html就可以实现和集成一个强大的报表工具
今天就分享一个示例Demo给大家（目前支持V3和V4）:

下面是设计界面和预览界面:

本示例主要为大家展现一些我们集成中需要注意的点和可以实现的一些功能:
顶部属性控制是原本设计器没有的，为了方便展示功能所设计:

国际化和自定义主题
可以看到，我们支持国际化和自定义主题的能力。

国际化我们默认支持翻译了包括中文、日文、英文等，特殊语种需要自行翻译。
主题的话我们使用我们的主题编辑器即可编辑主题需要的css:
https://demo.grapecity.com.cn/activereportsjs/theme-editor

报表打开及保存
因为ARJS是一款纯前端的报表，本身出发点是轻量级和快速集成，所以报表的打开，新建以及保存其实都是需要自己实现的。
所以大家如果集成，也需要自己实现，本示例中主要提供了报表上传以及一些示例报表的预览。
保存的报表将被临时储存起来，页面刷新及重置。可以利用另存为将设计的报表下载下来。
实现参考:designer.setActionHandlers

报表设计器内置资源及查看器如何查询:
示例中内置了一部分报表设计主题和内置报表，用于整体的报表美观和报表的跳转。
我们将设计器主题和报表主题区分开，设计器可以自定义喜欢的风格。而报表设计的主题是最终用户展示查看的样式。所以不同的主题也可以提高报表
整体的美观程度。而这些都被统称为报表可用资源。
实现参考:designer.setResourceProvider
注:因为ARJS设计器和查看器实际上是分开的，所以这些资源在设计器中只是展示，在查看器被实际使用。所以在查看器需要实际去获取这些资源
实现参考:viewer.open(report.definition, {ResourceLocator: {getResource(resourceName)}})
需要通过resourceName去获取实际资源

集成参考主要查看:
因为字体文件较大，所以将字体文件删除
ARJS_Init.js

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

ARJS-Demo分享

本帖子中包含更多资源

0 个回复

Wyn高级认证

Wyn认证