多语言展示
当前在线:724今日阅读:39今日分享:10

电子表格FineReport教程:[18]Web页面集成问题

下面就通过电子表格FineReport来简单介绍一下。
工具/原料
1

电子表格FineReport7.1.1

2

大小:148.2M 适用平台:windows/linux

编码转换
1

问题描述报表已集成到Web页面中,通过在页面传递参数至报表中时,会发现有时某些参数值,传递到报表中是显示为问号(???)或乱码等等一系列不能正常显示的情况。

2

问题原因这是由于浏览器和报表服务器的编码不同,字符多次进行编码转换时出现错误导致字符的显示出现乱码,尤其是中日韩文和特殊字符更容易出现乱码问题。详细的编码原理。

3

解决方案在给报表服务器发送请求之前,对URL或者只对URL里面的参数名字和参数值,进行cjkEncode的编码,该方式兼容了各种不同的字符集,如ISO8859-1、 UTF-8、 GBK、 ENU_JP,尤其对中日韩文的处理采取了统一的方案。

4

javascript中FineReport字符转换原理在给报表服务器发送请求之前,对URL或者只对URL里面的参数名字和参数值,进行cjkEncode的编码。源码如下:function cjkEncode(text) {      if (text == null) {      return '';      }      var newText = '';      for (var i = 0; i < text.length; i++) {      var code = text.charCodeAt (i);       if (code >= 128 || code == 91 || code == 93) {//91 is '[', 93 is ']'.      newText += '[' + code.toString(16) + ']';      } else {      newText += text.charAt(i);      }      }      return newText;     }

6

如果只对参数值进行编辑转换,在参数后面调用FR.cjkEncode()方法,如:window.location='http://localhost:8075/WebReport/ReportServer?reportlet=reportname.cpt¶name='+FR.cjkEncode('华东');

7

对Form表单进行cjkEncode如果是以Form表单把参数提交到报表里面,也同样需要在提交前调用cjkEncode进行编码转换,如下例子

8

特殊符号处理如果在需要进行cjkEncode的URI的参数中包含特殊字符,比如%,#,$,=,&,/,?,+,@等字符时,需要在cjkEncode之后,再次调用javascript的encodeURIComponent对这些特殊字符进行编码。如参数值是”%华%“这样的字符,就需要写成encodeURIComponent(FR.cjkEncode('%华%')),一定要先进行cjkEncode,然后再进行encodeURIComponent,完整代码如下:

iframe嵌入报表滚动条问题
1

一个网页中嵌入了一个iframe,iframe中嵌入一张报表,当报表大小超过iframe大小时,iframe中就会出现滚动条;当iframe超过浏览器大小时,浏览器便会出现滚动条,就是下图这种效果。

2

实现原理如果我们横向与纵向都只想保留一个滚动条,应该怎么做呢?首先我们来看一下iframe的定义方式:其中height、width决定了iframe的大小,其值有两种写法:height=100%相对于浏览器的百分比height='800'实际像素值frameborder='0'设置HTML框架边框的显示方式,0则表示没有边框

3

实现步骤如果用实际像素值来定义iframe的大小,就可能出现iframe比浏览器大的情况。因此这个问题的解决方法就是,定义iframe大小时使用百分比来定义,这样确保iframe始终在浏览器内,只有iframe中才可能会出现滚动条,如下图所示的效果,就只有一组滚动条了。

4

其它问题其中使用谷歌浏览器还是会有滚动条,因为body默认有margin属性,谷歌计算iframe的宽度时去掉margin了,但是计算高度时没去掉,所以页面集成时需要修改body属性,加上style='margin:0px'。

调用FineReport.js报错
1

问题描述在将报表集成到您自己的页面中时,调用finereport.js内置方法时如调用FR.doURLPDFPring()方法,JS会出现:$.support.boxModel为空或不是对象的错误,如下图所示:

2

原因Jquery版本冲突导致的,您使用的Jquery版本和finereport.js中使用的版本不同,我们内置的jquery版本是1.9.2。

3

解决方案将页面中调用的finereport.js即 的代码放置在调用您用Jquery写的代码之前即可解决。

隐藏报表内置工具栏
1

问题描述在web页面集成,将报表嵌入到用户页面时,会自动显示FR内置工具栏,但是我们可能自定义了用户栏,不希望显示FR内置工具栏。我们可以设置FR内置工具栏隐藏。

2

设置模板可以通过设置模板的方式隐藏内置FR工具栏。通过设计器打开模板,在菜单栏上点击模板>模板web属性,进入到报表web属性设置框,可对分页预览>填报预览>数据分析三种预览方式的工具栏进行设置,如下图所示:以分页预览设置为例:把使用工具栏选中的勾,去掉则访问模板,就隐藏报表内置工具栏了。

3

使用url控制我们也可以在页面的url后面加上&__showtoolbar__=false进行隐藏内置工具栏。

报表嵌入在html中,IE9下,图表显示不出来
1

问题描述将一张含有图表的报表通过iframe的方式嵌入到html中,图表在ie9的quirks模式下显示不出来,其他浏览器比如说,firefox,google等浏览器下显示正常,如下图:IE9的quirks模式下:

2

其他浏览器下:

3

解决思路由于ie9下面不同解析模式,图表展现不同,IE9下的quirks模式不可以,ie9标准模式能正常展现,所以我们可以修改外层的html的说明来解决这个问题,指明默认采用ie9模式即可。

4

解决方案i将报表嵌入到html中的代码如下: 

5

方案一修改doctype,在最上方的doctype说明中声明该html在ie9下打开的时候,打开模式默认为IE标准模式,代码如下:整体代码如下: 

6

方案二增加一个meta标签,表明ie浏览器打开该html时,采用ie标准模式,代码如下:整体代码如下: 

7

效果查看修改将修改之后的html放在%FineReport_HOME%\WebReport目录下,在IE9地址栏输入http://ip:端口号/WebReport/xxx.html,能可以看到图表已经显示出来,就说明上面的修改成功。如下图:

推荐信息