web 报表工具如何自适应-阿里云开发者社区

开发者社区> ibelieve001> 正文

web 报表工具如何自适应

简介: 自适应,Web报表
+关注继续查看

现在的报表用户已经不再将报表作为一个单纯的报表工具看待了,有时候也会当作页面工具来使用,这时为了页面显示工整美观,就需要报表能够自适应宽度。下面我们就基于润乾报表来讲一下是如何做到自适应展现报表。
产品:润乾报表 V2018
方法 1:使用自带的 matchReport.jsp 访问报表,这个页面通过 reportMatchSize 这个自适应 js 函数实现自适应功能。
1、 新建报表(过程不再详细说明)
将报表保存在安装目录的 reportwebwebappsdemoWEB-INFreportFiles 下面。
2、 启动服务,访问报表
访问报表的连接为:http://IP:端口 /demo/reportJsp/matchReport.jsp?rpx= 报表名称.rpx (如果报表保存在 reportFiles 的下级文件夹中,访问报表的 url 需要改为:……rpx= 文件夹名称 / 报表名称.rpx)
3、 报表在 PC 端的展现效果:
1

通过上面的展现效果可以看出,使用自带的 matchReport.jsp 访问报表,在自适应宽度的时候高度也同比例缩放了。如果我们不想要这种宽度自适应,高度同比例缩放的效果,我们可以试试下面这种方式。
方法 2:润乾报表在网页端展示时是以纯 html 形式展现,所以可以通过页面对展现的报表进行控制。
在展现页面的 showReport.jsp 添加到以下 js:

<script language="javascript">

 myResize();

 function myResize() {

 var tab1 = document.getElementById("report1");

 tab1.style.width=document.body.clientWidth;//  网页可见区域宽

 }

  window.onload=myResize;

 window.onresize=myResize;

</script>

PC 端展现效果:
2

小提示
1、润乾报表自带 mode 自适应方式,有以下 8 种取值,可直接修改 matcvhReport.jsp 里面的 mode 属性:
3

2、matchReport.jsp 自适应方式也适用于手机端,在手机浏览器输入访问报表的 URL 即可。具体可参考文章:关于报表在移动端展现你需要知道哪些?(c.raqsoft.com.cn/article/1539050767973?r=IBelieve)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Grid++Report实现Web报表
<span style="font-family:楷体; font-family:楷体; font-size:19px; line-height:27px; widows:auto">     最早接触报表是在机房收费系统中,那时候还是在C/S模式下,所以可以直接在窗体上添加报表。而现在,已经转战B/S模式下。本篇博客将介绍如何实现Web报表。</span> <div style="fo
2977 0
KVM WEB管理工具——WebVirtMgr(二)日常配置
KVM WEB管理工具-WebVirtMgr的日常配置:添加宿主机,创建虚机,磁盘扩容,快照等
19685 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5676 0
好程序员web前端分享高度自适应
好程序员web前端分享高度自适应一、宽高自适应网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。
755 0
+关注
62
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载