关于JS的编码转换问题

时间 2019-11-05

原文原文链接

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

这是因为浏览器和报表服务器的编码不一样，字符屡次进行编码转换时出现错误致使字符的显示出现乱码，尤为是中日韩文和特殊字符更容易出现乱码问题。html

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

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表单，报表服务器智能的将这些字符正确的转换过来。post

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

一、对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()方法，如：code

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

二、对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>

三、特殊符号处理

若是在须要进行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>