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

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

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

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;
}

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

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

1、  对URL进行cjkEncode

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script type="text/javascript"	src="ReportServer?op=emb&resource=finereport.js"></script>
<Script Language="JavaScript">
function frOpen() {
	window.location=FR.cjkEncode("http://localhost:8075/WebReport/ReportServer?reportlet=doc/Primary/Parameter/Parameter.cpt&地区=华东");
}
</Script>
</head>
<body>
<input type="button" value="字符转换1" onclick="frOpen()">
</body>
</html>

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

window.location="http://localhost:8075/WebReport/ReportServer?reportlet=reportname.cpt¶name="+FR.cjkEncode("华东");

2、对Form表单进行cjkEncode

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

3、特殊符号处理

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script type="text/javascript"	src="ReportServer?op=emb&resource=finereport.js"></script>
<Script Language="JavaScript">
function frOpen() {
window.location=FR.cjkEncode("http://localhost:8075/WebReport/ReportServer?reportlet=doc/Primary/Parameter/Parameter.cpt&地区=") +encodeURIComponent(FR.cjkEncode("%华%"));
	}
</Script>
</head>
<body>
<input type="button" value="字符转换1" onclick="frOpen()">
</body>
</html>　　

关于JS的编码转换问题的更多相关文章

  1. js 字符串编码转换函数

    escape 方法 对 String 对象编码以便它们能在所有计算机上可读, escape(charString) 必选项 charstring 参数是要编码的任意 String 对象或文字. 说明 ...

  2. [NodeJS] Node.js 编码转换

    Node.js 自带的 toString() 方法不支持 gbk,因此中文转换的时候需要加载第三方库,推荐以下两个编码转换库,iconv-lite 和 encoding. iconv, iconv-l ...

  3. Node.js 编码转换

    Node.js自带的toString()方法不支持gbk,因此中文转换的时候需要加载第三方库,推荐以下两个编码转换库,iconv-lite和encoding.       iconv, iconv-l ...

  4. PHP 支持中文目录和文件的的遍历：文件编码转换

    在使用 readdir() 遍历指定目录时,使中文目录和文件名都正常显示需要使用 iconv() 进行文件编码转换: <?php header("Content-type:text/h ...

  5. JS 字符串编码函数（解决URL特殊字符传递问题）：escape()、encodeURI()、encodeURIComponent()区别详解

    javaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...

  6. js 中编码（encode）和解码（decode）的三种方法

    js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 下 ...

  7. android TextView Unicde编码转换 android中一些特殊字符Unicode码值

    android TextView Unicde编码转换 android中一些特殊字符Unicode码值 android中一些特殊字符(如:←↑→↓等箭头符号,约等于号≍)的Unicode码值 Text ...

  8. 详细介绍Base64的编码转换方式

    下面,详细介绍Base64的编码转换方式. 所谓Base64,就是说选出64个字符----小写字母a-z.大写字母A-Z.数字0-9.符号"+"."/"(再加上 ...

  9. 使用vbs脚本进行批量编码转换

    使用vbs脚本进行批量编码转换 最近需要使用SourceInsight查看分析在Linux系统下开发的项目代码,我们知道Linux系统中文本文件默认编码格式是UTF-8,而Windows中文系统中的默 ...

随机推荐

  1. asp.net 验证控件

    前台文件 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1. ...

  2. anonymousIdentification 与匿名访问

    anonymousIdentification 元素(ASP.NET 设置架构) 来自 <https://msdn.microsoft.com/zh-cn/library/91ka2e6a(v= ...

  3. WCF 数据数据 DataTable

    一般在WCf数据大数据是 List集合 或者 Json. public DataTable GetProperitybyModelCode(string modelCode) { using (var ...

  4. c中使用gets() 提示warning: this program uses gets(), which is unsafe.

    今天在C代码中使用gets()时提示“warning: this program uses gets(), which is unsafe.”,然后这个程序还能运行,无聊的我开始查阅资料,为啥gets ...

  5. ahjesus HttpQuery

    /// <summary> /// 有关HTTP请求的辅助类 /// </summary> public class HttpQuery { private static re ...

  6. linux lin命令

    ln是linux中又一个非常重要命令,它的功能是为某一个文件在另外一个位置建立一个同不的链接,这个命令最常用的参数是-s,具体用法是:ln –s 源文件 目标文件. 当我们需要在不同的目录,用到相同的 ...

  7. ImFire即时通讯系统构建（前言）

    缘起termtalk 一切起源于我对蘑菇街termtalk开源IM系统源代码的好奇,termtalk简称tt.无论如何,都应该先向tt致敬,开源实属不易.看了一些分析tt架构的文章,感觉还不错,说是能 ...

  8. 【grunt整合版】30分钟学会使用grunt打包前端代码

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

  9. li进度条宽度和颜色按顺序显示的效果。

    实际项目中li和里边的数值是动态生成的,需要控制它的宽度和颜色,效果如图: 如果能实现颜色按数值规律变化就好了,目前颜色是固定到数组中的. 实例代码如下: <!DOCTYPE html>& ...

  10. sass初级语法

    github地址:https://github.com/lily1010/sass/tree/master/course01 用到的sass语法是: sass --watch test.scss:te ...