File APIでローカルからCSVファイルを読み込んで、ブラウザ上で表示してみます。
サンプルコード
CSVファイルを読み込む場合、readAsText()メソッドを使用します。
HTML
1 2 | <input type="file" name="select" id="select" /><div id="result"></div> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | // 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は以下の2つで試してみました。
sample_utf8.csv
sample_sjis.csv
文字コードがUTF-8のファイルの場合はうまく表示できましたが、Shift-jisのファイルの場合は文字化けしてしまいました。
対応する文字コードを変更したい場合、readAsText()の第二引数で指定できます。
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | // 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にしておけばよさそうな気がしますが、場合によっては注意が必要です。
【参考サイト】
大変参考になりました。
ありがとうございました。