jquery.csv2table.jsでShift_JISのCSVを表示する

  • 26
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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

ブラウザでの表示結果は以下のようになります。
c64901f25c9ecbbb0157741ad2e22dd0.png

ただし、うまくいくのはdata1.csvがUTF-8の場合です。WindowsではCSVはShift_JISのことが多いです。これはExcelがBOM付きのUTF-8でないと、UTF-8のCSVを正しく読み込んでくれないからです。Ajaxでファイルを読むと、特に指定がないとUTF-8として読まれるので、CSVがShift_JISだと文字化けします。
e7e4f7d4936aee036b3428611266a50a.png

これを避けるには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の場合にどうするかについて、正しい対処法が書いてある記事がなかったので書いてみました。