よしたく blog

ほぼ週刊で記事を書いています

Vue.jsでCSVを取り込んで表示する

Vue.js

今回はVue.jsでCSVファイルを取り込んで、そのまま画面に表示することをしたいと思います。

今回のソースは過去のツイート情報を表示することを想定しています。
全ツイート履歴をダウンロードする方法は公式を御覧ください。

help.twitter.com

全ツイート情報は、jsファイルでダウンロードできますが、JSONに拡張子を変更しそこからCSVに変更してください。自分は目的と違うところでつまづきたくなかったので次のサービスを利用しました。

convertcsv.com

<template>
  <div>
    <h1>CSVインポート</h1>
    <input @change="fileRead" type="file" id="file_input_expense" name="file_input_expense">
    <li v-for="worker in workers" v-bind:key='worker.id'>
        <a v-bind:href=worker.url target="_blank">https://twitter.com/yoshitaku_jp/status/{{ worker.id }}</a> <button v-on:click="delTweet(worker)" type="button" id="delTweet" name="delTweet">delTweet</button>
    </li>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      workers: []
    };
  },
  methods: {
    fileRead: function(e) {
      var _this = this;
      let file = e.target.files[0];
      let csv = [];
      let reader = new FileReader();

      reader.onload = function() {
        let lines = reader.result.split("\n");
        lines.forEach(element => {
          let workerData = element.split(",");
          let worker = {
            id: workerData[8],
            url: "https://twitter.com/yoshitaku_jp/status/" + workerData[8],
          };
          csv.push(worker);
        });
        _this.workers = csv;
      };
      reader.readAsBinaryString(file);
    }
};
</script>

ソースはほぼこちらを参考にさせていただきました。 https://qiita.com/WallyNegima/items/67a16915fbd77e2e0f03 https://qiita.com/tantai/items/5cf98364efa4a80324bd

参考先では次のように書かれていましたが、自分なりに模索していたら上記のような形になりうまくいきました。少しスッキリできてよかったです。

const loadFunc = () => {
  ///処理
};
reader.onload = loadFunc;