2017

6

5

CSVファイルをドラッグ&ドロップでデータをtable表示してやんよ!!!

タグ:

Pocket
LINEで送る
Facebook にシェア
reddit にシェア
LinkedIn にシェア

通常ファイルをinput要素などから読み込んでFileAPIからプレビューさせるのがセオリーですが、 FileAPIの機能はinputさせなくてもファイルデータを取り込むことが可能です。

HTML・CSSでCSVファイルを取り込むエリアを作成

HTML

<div id="drop_wrap">
<p>ファイルをドロップしてください</p>
</div>
<table id="data_result">
  <thead>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
    <th>見出し4</th>
  </thead>
  <tbody>
    <!-- ここにCSVデータ表示  -->
  </tbody>
</table>

CSS

#drop_wrap {
    display: block;
    border: 2px dashed #bbb;
    border-radius: 5px;
    color: #bbb;
    padding: 25px;
    text-align: center;
    margin: 10px auto 5px;
    font-size: 18px;
    font-weight: bold;
    -khtml-user-drag: element;
    margin: 5% auto;
    width: 80%;
}

JSでドロップ処理とFileAPI解析とデータ出力

JavaScript

$(function(){
   // FileAPIでCSVファイルのドロップ出力処理
    $("#drop_wrap").on("drop", function(e) {
        e.preventDefault();
        var $result_body = $('#data_result tbody');
        var files = e.originalEvent.dataTransfer.files[0];
        var reader = new FileReader();
        reader.onload = function(event) {
            // " "ごとに分割して配列化
            var lineArr = event.target.result.split(" ");
            // 行と列の二次元配列にする
            var itemArr = [];
            for (var i = 0; i < lineArr.length; i++) {
                itemArr[i] = lineArr[i].split(",");
            }
            // tableタグで出力
            var insert = '';
            for (var i = 0; i < itemArr.length; i++) {
                insert += '<tr>';
                for (var j = 0; j < itemArr[i].length; j++) {
                      insert += '<td>' + itemArr[i][j] + '</td>';
                }
                insert += '</tr>';
            }
            $result_body.html(insert);
        }

        reader.readAsText(files, 'Shift_JIS');
    }).on("dragenter", function() {
        return false;
    }).on("dragover", function() {
        return false;
    });
});
これでドロップ要素エリアにCSVファイルを投げ込むと展開されたCSVデータがtable要素内に表示することが出来ます。 今回のデモはShift-Jis文字コードのCSVで対応しているため、その他の文字コードはreadAsText関数内で別途対応してください。 あとブラウザのメモリなどの関係でうん千行単位のCSVデータは処理落ちすると思います。未検証
Pocket
LINEで送る
Facebook にシェア
reddit にシェア
LinkedIn にシェア

トップへ