【JavaScript】CSVファイルをインポートする方法

 

はじめに

この記事では、JavascriptでCSVファイルをインポートする方法をご紹介します。

試しに下記のボタンを押してCSVファイルをインポートしてみてください！

イメージしやすいように、CSVデータをpタグで表示するようにしています。

See the Pen
CSV import by Shungo Matsumura (@shungo0525)
on CodePen.

 

 

CSVファイルをインポートするコード

コピペでOK!!

index.html

<!-- CSVデータをインポートする部分 -->
<input type="file" name="csv_import" accept="csv" id="upload-file">

<!-- CSVデータを表示する部分 -->
<div id='csv_data'></div>

 

sample.js

const input = document.getElementById('upload-file');
// NOTE: uploadされたら検知する
input.addEventListener('change', (e) => {
  const reader = new FileReader();
  // NOTE: fileを文字列として読み込む
  reader.readAsText(e.target.files[0]);
  const csv_data = document.getElementById("csv_data");

  reader.onload = function(event) {
    result = event.target.result;
    // CSVデータを整形
    result = result.replace(/\r\n|\n|\r/g, ',').replace(/ /g, '').split(',');
    // CSVデータを出力
    result.forEach((item) => {
      // CSVデータをpタグで表示
      const p = document.createElement("p");
      p.textContent = item;
      csv_data.appendChild(p);
    })
  };
});

 

コードの説明

getElementById

指定されたidの要素を取得します。

今回で言うとid=”upload-file”のinputタグを取得しています。

addEventListener

マウスによるクリックやキーボードからの入力などのイベント処理を実行するメソッドです。

‘change’を指定しているので、inputタグに変更があれば、関数が実行されます。

readAsText

FileReaderで読み込んだCSVファイルを文字列として読みとります。