關於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>