サイト制作に関するメモ書き

HOME > JavaScript > File APIでCSVファイルを読み込む

File APIでCSVファイルを読み込む

File APIでローカルからCSVファイルを読み込んで、ブラウザ上で表示してみます。

サンプルコード

CSVファイルを読み込む場合、readAsText()メソッドを使用します。

HTML

<input type="file" name="select" id="select" />
<div id="result"></div>

JavaScript

// File APIに対応しているか確認
if(window.File) {
	var result = document.getElementById('result');
	var select = document.getElementById('select');

	// ファイルが選択されたとき
	select.addEventListener('change', function(e) {
		// 選択されたファイルの情報を取得
		var fileData = e.target.files[0];

		var reader = new FileReader();
		// ファイル読み取りに失敗したとき
		reader.onerror = function() {
			alert('ファイル読み取りに失敗しました')
		}
		// ファイル読み取りに成功したとき
		reader.onload = function() {
			// 行単位で配列にする
			var lineArr = reader.result.split("\n");
			// 行と列の二次元配列にする
			var itemArr = [];
			for (var i = 0; i < lineArr.length; i++) {
				itemArr[i] = lineArr[i].split(",");
			}

			// tableで出力
			var insert = '<table>';
			for (var i = 0; i < itemArr.length; i++) {
				insert += '<tr>';
				for (var j = 0; j < itemArr[i].length; j++) {
					insert += '<td>';
					insert += itemArr[i][j];
					insert += '</td>';
				}
				insert += '</tr>';
			}
			insert += '</table>';
			result.innerHTML = insert;
		}

		// ファイル読み取りを実行
		reader.readAsText(fileData);
	}, false);
}

CSVファイルを読み込むデモページ

CSVは以下の2つで試してみました。
sample_utf8.csv
sample_sjis.csv
文字コードがUTF-8のファイルの場合はうまく表示できましたが、Shift-jisのファイルの場合は文字化けしてしまいました。
 

対応する文字コードを変更したい場合、readAsText()の第二引数で指定できます。

JavaScript

// File APIに対応しているか確認
if(window.File) {
	var result = document.getElementById('result');
	var select = document.getElementById('select');

	// ファイルが選択されたとき
	select.addEventListener('change', function(e) {
		// 選択されたファイルの情報を取得
		var fileData = e.target.files[0];

		var reader = new FileReader();
		// ファイル読み取りに失敗したとき
		reader.onerror = function() {
			alert('ファイル読み取りに失敗しました')
		}
		// ファイル読み取りに成功したとき
		reader.onload = function() {
			// 行単位で配列にする
			var lineArr = reader.result.split('\n');
			// 行と列の二次元配列にする
			var itemArr = [];
			for (var i = 0; i < lineArr.length; i++) {
				itemArr[i] = lineArr[i].split(',');
			}

			// tableで出力
			var insert = '<table>';
			for (var i = 0; i < itemArr.length; i++) {
				insert += '<tr>';
				for (var j = 0; j < itemArr[i].length; j++) {
					insert += '<td>';
					insert += itemArr[i][j];
					insert += '</td>';
				}
				insert += '</tr>';
			}
			insert += '</table>';
			result.innerHTML = insert;
		}

		// ファイル読み取りを実行
		reader.readAsText(fileData, 'Shift_JIS');
	}, false);
}

readAsText()の第二引数に’Shift_JIS’と指定することで、文字コードがShift-jisのファイルを文字化けせずに読み込めるようになりました。
CSVファイルを読み込むデモページ2

ただこの場合、UTF-8のファイルで文字化けしてしまいます。
ExcelでCSVファイルを作った場合は文字コードがShift-jisになるので、基本的にはShift-jisにしておけばよさそうな気がしますが、場合によっては注意が必要です。

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP