Chinaunix首页 | 论坛 | 博客
  • 博客访问: 209352
  • 博文数量: 97
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1024
  • 用 户 组: 普通用户
  • 注册时间: 2014-04-03 09:03
文章分类
文章存档

2017年(17)

2016年(54)

2015年(25)

2014年(1)

我的朋友

分类: Web开发

2016-08-11 15:08:17

在进行JS开发过程中,尤其是在开发报表时,报表已集成到Web页面中,通过在页面传递参数至报表中时,会发现有时某些参数值,传递到报表中是显示为问号或乱码等等一系列不能正常显示的情况。

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

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

javascript中FineReport字符转换原理

在给报表服务器发送请求之前,对URL或者只对URL里面的参数名字和参数值,进行cjkEncode的编码。源码如下:

点击(此处)折叠或打开

  1. function cjkEncode(text) {
  2.     if (text == null) {
  3.         return "";
  4.     }
  5.     var newText = "";
  6.     for (var i = 0; i < text.length; i++) {
  7.         var code = text.charCodeAt (i);
  8.         if (code >= 128 || code == 91 || code == 93) {//91 is "[", 93 is "]".
  9.             newText += "[" + code.toString(16) + "]";
  10.         } else {
  11.             newText += text.charAt(i);
  12.         }
  13.     }
  14.     return newText;
  15. }

经过编码的URL或者Form表单,报表服务器智能的将这些字符正确的转换过来。

cjkEncode方法在FineReport的JS库中已经预先提供了,用户只要加载了FR的JS库,就可以使用FR.cjkEncode对中日韩文字符进行encode,如下示例:

1、  对URL进行cjkEncode

点击(此处)折叠或打开

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=GBK">
  4. <script type="text/javascript"    src="ReportServer?op=emb&resource=finereport.js"></script>
  5. <Script Language="JavaScript">
  6. function frOpen() {
  7.     window.location=FR.cjkEncode("地区=华东");
  8. }
  9. </Script>
  10. </head>
  11. <body>
  12. <input type="button" value="字符转换1" onclick="frOpen()">
  13. </body>
  14. </html>

如果只对参数值进行编辑转换,在参数后面调用FR.cjkEncode()方法,如:

window.location=""+FR.cjkEncode("华东"); 

2、对Form表单进行cjkEncode

点击(此处)折叠或打开

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
  4. <script type="text/javascript" src="/WebReport/ReportServer?op=emb&resource=finereport.js"></script>
  5. <script>
  6. function autoSubmit() {
  7.     var Region1 = document.getElementById('Region'); //获取到参数Region所在文本框
  8.     Region1.value = FR.cjkEncode(Region.value); //对值参数值进行编码转化
  9.     Region1.name = FR.cjkEncode("地区"); //对参数控件名编码转换,如果参数名字为英文,则不需要此操作
  10.     document.FRform.submit();
  11. }
  12. </script>
  13. <body>
  14. <form name=FRform method=post action="/WebReport/ReportServer?reportlet=doc/Primary/Parameter/Parameter.cpt">
  15. <input type="text" id="Region" name="地区" value="华东">
  16. <input type="button" name="show" value= "查看" onclick="autoSubmit()"/>
  17. </body>
  18. </html>

3、特殊符号处理

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

点击(此处)折叠或打开

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=GBK">
  4. <script type="text/javascript"    src="ReportServer?op=emb&resource=finereport.js"></script>
  5. <Script Language="JavaScript">
  6. function frOpen() {
  7. window.location=FR.cjkEncode("地区=") +encodeURIComponent(FR.cjkEncode("%华%"));
  8.     }
  9. </Script>
  10. </head>
  11. <body>
  12. <input type="button" value="字符转换1" onclick="frOpen()">
  13. </body>
  14. </html>

阅读(1075) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~