Vue.js CSVファイルを読み込み表示[FileReader]

Vue.jsにおいてFileReader APIを利用してCSVファイルを読み込み、画面に表示させてみます。

CSVファイルの内容と画面表示結果

id,name,age
1,太郎,22
2,花子,33
3,次郎,44
4,夕子,55
5,一郎,66

id,name,age

1,太郎,22

2,花子,33

3,次郎,44

4,夕子,55

5,一郎,66

CSV以外のファイルを読み込んだ場合、下記のようなメッセージが表示されます。

<template>
  <div>
    <input type="file" @change="loadCsvFile" />
    <p>{{ message }}</p>

    <table border="1">
      <tr v-for="(worker, index) in workers" :key="index">
        <td v-for="(column, index) in worker" :key="index">{{ column }}</td>
      </tr>
    </table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: "",
      workers: []
    };
  },
  methods: {
    loadCsvFile(e) {
      let vm = this;
      vm.workers = [];
      vm.message = "";
      let file = e.target.files[0];

      if (!file.type.match("text/csv")) {
        vm.message = "CSVファイルを選択してください";
        return;
      }

      let reader = new FileReader();
      reader.readAsText(file);

      reader.onload = () => {
        let lines = reader.result.split("\n");
        lines.shift();
        let linesArr = [];
        for (let i = 0; i < lines.length; i++) {
          linesArr[i] = lines[i].split(",");
        }
        vm.workers = linesArr;
      };
    }
  }
};
</script>

<div>

<p>{{ message }}</p>

<td v-for="(column, index) in worker" :key="index">{{ column }}</td>

</tr>

</table>

</div>

</template>

export default {

data() {

return {

message: "",

workers: []

};

methods: {

loadCsvFile(e) {

let vm = this;

vm.workers = [];

vm.message = "";

let file = e.target.files[0];

if (!file.type.match("text/csv")) {

vm.message = "CSVファイルを選択してください";

return;

}

let reader = new FileReader();

reader.readAsText(file);

reader.onload = () => {

let lines = reader.result.split("\n");

lines.shift();

let linesArr = [];

for (let i = 0; i < lines.length; i++) {

linesArr[i] = lines[i].split(",");

}

vm.workers = linesArr;

};

}

};

</script>

27行目

読み込んだファイルの情報を取得しています。これら情報から容量等を取得しファイルの検証をおこなうことができます。上記では単純にMIMEタイプのtext/csvでCSVファイルかどうかを判別（29〜32行目）しています。

34・35行目

FileReaderのインスタンスを作成しfileを読み込んでいます。CSVの場合はreadAsTextを利用し読み込みますが（他にも画像の場合はreadAsDataURLなど）、文字コードはデフォルトでUTF-8に設定されているので、Shift_JISの場合は下記のように第2引数に指定する必要があります。読み込み完了と同時にonloadが発動します（37行目）。

reader.readAsText(file, "Shift_JIS");

1	reader.readAsText(file, "Shift_JIS");

思考の葉

思考の葉

Vue.js CSVファイルを読み込み表示[FileReader]