JavaScriptでShift_JISのcsvを読み込む（文字化け対策）

楽天カードの利用明細csvを読みこんでツリーマップを表示するコードを書いてみたわけですが、明細csvの文字コードがShiftJISだったため、思っていたより手間取りました。

備忘録としてメモっておきます。

csv読み込み

UTF8のcsvであれば、下記の方法でinput type=fileから読み込むことができます。

var fileBtn = document.querySelector("#fileBtn");
fileBtn.addEventListener('change', upload, false);

function upload(evt) {
	if (!isFileUpload()) {
		console.log('お使いのブラウザはファイルAPIがサポートされていません');
	} else {
		var data = null;
		var file = evt.target.files[0];
		var reader = new FileReader();
		reader.reader.readAsText(file);
		reader.onload = function(event) {
			var result = event.target.result;
			console.log(result) //-> csvデータ(string)
		};
		reader.onerror = function() {
			console.log('ファイルが読み込めませんでした。 ' + file.fileName);
		};
	}
}

function isFileUpload() {
	   var isCompatible = false;
	   if (window.File && window.FileReader && window.FileList && window.Blob) {
	   isCompatible = true;
	   }
	   return isCompatible;
}

var fileBtn = document.querySelector("#fileBtn");

fileBtn.addEventListener('change', upload, false);

function upload(evt) {

if (!isFileUpload()) {

console.log('お使いのブラウザはファイルAPIがサポートされていません');

} else {

var data = null;

var file = evt.target.files[0];

var reader = new FileReader();

reader.reader.readAsText(file);

reader.onload = function(event) {

var result = event.target.result;

console.log(result) //-> csvデータ(string)

};

reader.onerror = function() {

console.log('ファイルが読み込めませんでした。 ' + file.fileName);

};

}

function isFileUpload() {

var isCompatible = false;

if (window.File && window.FileReader && window.FileList && window.Blob) {

isCompatible = true;

}

return isCompatible;

}

しかし、csvの文字コードがshiftJISだと、出力結果が文字化けします。

文字コード変換ライブラリ

JavaScriptで文字コードを変換するライブラリを作成されている方がいたので、今回はこちらを使わせていただきました。

JavaScriptで文字コード変換ライブラリ作ってみた | 圧縮電子どうのこうの

ただ一点注意すべきポイントがあって、FileReaderでデータを読み込む際readAsTextメソッドではなくreadAsBinaryStringメソッドを使う必要があります。これに気付くまでに結構時間がかかりました orz

csv(shiftJIS)読み込み

ShiftJISのcsvデータを読み込むサンプルは以下となります。

var fileBtn = document.querySelector("#fileBtn");
fileBtn.addEventListener('change', upload, false);

function upload(evt) {
	if (!isFileUpload()) {
		console.log('お使いのブラウザはファイルAPIがサポートされていません');
	} else {
		var data = null;
		var file = evt.target.files[0];
		reader = new FileReader();
		reader.readAsBinaryString(file);
		reader.onload = function(event) {
			var result = event.target.result;
			var sjisArray = str2Array(result);
			var uniArray = Encoding.convert(sjisArray, 'UNICODE', 'SJIS');
			var result = Encoding.codeToString(uniArray);
			console.log(result); //csvデータ(string)

		};
		reader.onerror = function() {
			console.log('ファイルが読み込めませんでした。 ' + file.fileName);
		};
	}
}

function isFileUpload() {
	   var isCompatible = false;
	   if (window.File && window.FileReader && window.FileList && window.Blob) {
	   isCompatible = true;
	   }
	   return isCompatible;
}

function str2Array(str) {
    var array = [],i,il=str.length;
    for(i=0;i<il;i++) array.push(str.charCodeAt(i));
    return array;
}

var fileBtn = document.querySelector("#fileBtn");

fileBtn.addEventListener('change', upload, false);

function upload(evt) {

if (!isFileUpload()) {

console.log('お使いのブラウザはファイルAPIがサポートされていません');

} else {

var data = null;

var file = evt.target.files[0];

reader = new FileReader();

reader.readAsBinaryString(file);

reader.onload = function(event) {

var result = event.target.result;

var sjisArray = str2Array(result);

var uniArray = Encoding.convert(sjisArray, 'UNICODE', 'SJIS');

var result = Encoding.codeToString(uniArray);

console.log(result); //csvデータ(string)

};

reader.onerror = function() {

console.log('ファイルが読み込めませんでした。 ' + file.fileName);

};

}

function isFileUpload() {

var isCompatible = false;

if (window.File && window.FileReader && window.FileList && window.Blob) {

isCompatible = true;

}

return isCompatible;

}

function str2Array(str) {

var array = [],i,il=str.length;

for(i=0;i<il;i++) array.push(str.charCodeAt(i));

return array;

}

JavaScriptでShift_JISのcsvを読み込む（文字化け対策）

csv読み込み

文字コード変換ライブラリ

csv(shiftJIS)読み込み

投稿者: shimizu

“JavaScriptでShift_JISのcsvを読み込む（文字化け対策）” への3件の返信