Web集成

1 概述

VeryReport是基于B/S结构的模式,实际软件项目需要报表展示,可以通过Web集成方式快速集成VeryReport报表。

VeryReport支持Web集成,是基于JWT实现。 JSON Web Token(JWT)是一个开放的行业标准(RFC 7519),它定义了一种简洁的、自包含的协议格式, 用于在通信双方传递json对象,传递的信息经过数字签名可以被验证和信任。

VeryReport通过页面 iframe 集成方式,直接将VeryReport的报表嵌入到已有的 Web 页面中, 只需要指定 iframe 的 src 属性即可,在src的url参数加入oauthId和accessToken字段,即可完成集成。

2 集成步骤

VeryReport完成系统集成步骤如下:

  • 添加授权

  • 获取accessToken

  • 使用accessToken

通过以上三步,即可完成VeryReport系统集成。

2.1 添加授权

添加授权入口:「系统管理」->「授权管理」,点击「新建」,依次输入「授权名称」、「令牌过期时间」、「描述」,点击「保存]」,如下图所示:

报表集成获取授权
2.2 获取accessToken

获取accessToken方式有两种:第一种,在授权列表中点击「token」按钮获取;第二种:通过接口获取accessToken。

2.2.1 通过按钮获取accessToken

在授权列表中点击「token」按钮获取,如下图所示:

获取token按钮

弹出accessToken页面,如下图所示:

显示token
2.2.2 通过接口获取accessToken

获取accessToken接口如下:

POST http://host:port/oauth/refreshToken

请求体:

Content-Type: applicaiton/json {   "oauthId":7,//授权编号   "loginName":"admin",//用户名   "password":"admin123"//用户密码 }

返回示例:

{   "code": 0,   "msg": "操作成功",   "data": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2OTk3MDgxNTAsImFjY2Vzc1Rva2VuIjoie1widXNlcklkXCI6MSxcInVzZXJOYW1lXCI6XCJhZG1pblwifSIsImlhdCI6MTY5OTcwNjM1MH0.vsqw1Yc6yC6hUvM0-upkL8BjhtvNVZHnJMA20Z04DGs" }

data为accessToken,accessToken在具有过期时间,当过期后,需要再次申请token。

2.3 使用accessToken

在url中添加oauthId和accessToken两个参数,可以访问任意VeryReport页面。

2.3.1 集成报表设计器

VeryReport复杂报表设计器,访问地址如下:

http://localhost:8088/report/designReport

在url中添加oauthId和accessToken两个参数,如下示例:

http://localhost:8088/report/designReport?oauthId=7&accessToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2OTk3MDgxNTAsImFjY2Vzc1Rva2VuIjoie1widXNlcklkXCI6MSxcInVzZXJOYW1lXCI6XCJhZG1pblwifSIsImlhdCI6MTY5OTcwNjM1MH0.vsqw1Yc6yC6hUvM0-upkL8BjhtvNVZHnJMA20Z04DGs

在浏览器中,输入上面的链接地址,即可完成集成报表设计器,如下图所示:

分页报表集成
2.3.2 集成报表

例如报表demo重复标题行报表访问地址如下:

http://localhost:8088/report/decision/page?id=426

在url中添加oauthId和accessToken两个参数,如下示例:

http://localhost:8088/report/decision/page?id=426&oauthId=7&accessToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2OTk3MDgxNTAsImFjY2Vzc1Rva2VuIjoie1widXNlcklkXCI6MSxcInVzZXJOYW1lXCI6XCJhZG1pblwifSIsImlhdCI6MTY5OTcwNjM1MH0.vsqw1Yc6yC6hUvM0-upkL8BjhtvNVZHnJMA20Z04DGs

在浏览器中,输入上面的链接地址,即可访问该报表。

同样也可以通过页面 iframe 集成方式,直接将VeryReport的报表嵌入到已有的 Web 页面中, 只需要指定 iframe 的 src 属性即可,如下代码:

<iframe id="veryReportFrame"   width="900" height="600"   src="http://localhost:8088/report/decision/page?id=426&oauthId=7&accessToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2OTk3MDgxNTAsImFjY2Vzc1Rva2VuIjoie1widXNlcklkXCI6MSxcInVzZXJOYW1lXCI6XCJhZG1pblwifSIsImlhdCI6MTY5OTcwNjM1MH0.vsqw1Yc6yC6hUvM0-upkL8BjhtvNVZHnJMA20Z04DGs"> </iframe>

用浏览器打开,如下图所示:

分页报表集成