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は以下の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にしておけばよさそうな気がしますが、場合によっては注意が必要です。
【参考サイト】
大変参考になりました。
ありがとうございました。