CSVファイルを読み込んでブラウザにテーブル表示できるjquery.csv2table.jsというJQueryプラグインがあります。使い方は簡単です。
<html>
<header>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://jsgt.org/lib/jquery/plugin/csv2table/v002/js/jquery.csv2table-0.02-b-4.7.js" type="text/javascript" charset="utf-8"></script>
</header>
<body>
<div id="view0"></div>
<script>
$(function(){
$('#view0').csv2table('./data1.csv');
});
</script>
</body>
</html>
data1.csvの内容は以下の通りです。
日付,結果,遠征,燃料,弾薬,鋼材,ボーキ,開発資材,高速修復材,高速建造材
2014-12-14 08:04:36,大成功,水上機基地建設,828,0,345,345,0,1,0
2014-12-14 08:19:08,成功,長距離練習航海,0,100,30,0,0,0,0
2014-12-15 22:55:59,成功,長距離練習航海,0,100,30,0,0,1,0
2014-12-15 22:56:09,大成功,海上護衛任務,345,345,34,34,0,0,0
ブラウザでの表示結果は以下のようになります。
ただし、うまくいくのはdata1.csvがUTF-8の場合です。WindowsではCSVはShift_JISのことが多いです。これはExcelがBOM付きのUTF-8でないと、UTF-8のCSVを正しく読み込んでくれないからです。Ajaxでファイルを読むと、特に指定がないとUTF-8として読まれるので、CSVがShift_JISだと文字化けします。
これを避けるにはCSVのエンコーディングにSJISを指定します。JavaScript側で行うには、XMLHttpRequestのoverrideMimeTypeでMIME Typeを上書きすればよいです。ただしこの方法は、InternetExplorerでは10以降でしか使えません。overrideMimeTypeの例は以下の通りです。csv2tableのソースコードを書き換えるのを避けるために、ajaxSetupでCSVファイルのMIME Typeを上書きしています。
$.ajaxSetup({
beforeSend: function(xhr, settings){
if (settings.url.endsWith(".csv"))
xhr.overrideMimeType("text/csv;charset=Shift_JIS");
}
});
$(function(){
$('#view0').csv2table('./data1.csv');
});
この問題はサーバー側で対処すればInternetExplorerのバージョンに依存せずにすみます。サーバーがApache httpdなら.htaccess等でAddType "text/csv; charset=Shift_JIS" .csvすればよいです。
この記事とよく似たブログ記事はいくつかあるのですが、csv2tableとShift_JISのCSVの場合にどうするかについて、正しい対処法が書いてある記事がなかったので書いてみました。