VueのデータをCSV形式でダウンロードする

VueでUIを作っていたら表示されているデータをダウンロードしたいという要望があったので実装してみました。

Data

下記ようなデータをdata()に入れてあるとします。

items: [
  { name: 'りんご', price: '100' },
  { name: 'みかん', price: '50' },
  { name: 'マンゴー', price: '3000' }
]

View

普通にこのデータをTable表示する時はこんな感じでしょうか？

<table border=1>
  <tr v-for="item in items">
    <td>{{ item.name }}</td>
    <td>{{ item.price }}</td>
  </tr>
</table>

それではその下にダウンロードボタンを追加します。呼び出す関数はdownloadCSV()とします。

<button v-on:click="downloadCSV">
  ダウンロード
</button>

Methods

CSVはファイルの先頭にBOMとしてを'\ufeff'を追加し、WindowsのExcelでUTF8の識別ができるようにします。

参考:
https://doruby.jp/users/ueki/entries/BOM付きUTF-8で文字化けしないCSV出力

後はデータをforEachで１行づつ作成し、Blobに入れます。そして、aタグのエレメントを作成しその中にデータを入れクリックしたのと同じ動作を実現します。

  methods: {
    downloadCSV () {
      var csv = '\ufeff' + '品名,価格\n'
      this.items.forEach(el => {
        var line = el['name'] + ',' + el['price'] + '\n'
        csv += line
      })
      let blob = new Blob([csv], { type: 'text/csv' })
      let link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = 'Result.csv'
      link.click()
    }
  }

これでCSVデータとしてダウンロードする事ができます。

気になる点

Excelで確認してこれで良いかと思ったのだけど、Wikipediaによると'\ufeff'はUTF-16になっているので\uefbbbfの方が良いのだろうか？要検証。