[Vue]フロントエンド機能のみでダウンロードを実装する[JS]

目次

1. 概要
2. 実装
3. 参考サイト

概要

フロントエンドのみ(=サーバサイドがダウンロードさせない) でダウンロードを行う機能を実装した時のメモです。

Vueを利用して実装していますが、ここで記載しているコードはVueに依存した機能ではなく、ピュアなJSのAPIをコールしているものです。

実装

ポイント

Blobオブジェクトを利用するところがポイントとなります。

ダウンロードのイベントが実行された際、download属性を付与したaタグの要素を動的に作成します。

このaタグ要素にはダウンロードさせたいBlobオブジェクトを設定しておきます。

そして、この要素のクリックイベントを発火させることでダウンロードさせます。

ソース

<div id="app">
  <h2>ダウンロードのデモ</h2>
  <textarea v-model="text"></textarea>
  <br>
  <button v-on:click="download">download</button>
</div>

new Vue({
  el: '#app',
  data: {
    text: '',
    csvData: [
      ['col1', 'col2', 'col3'],
      ['a', 'b', 'c'],
      ['aa', 'bb', 'cc'],
    ],
  },
  methods: {
    download: function() {
      let blob = new Blob([this.text], { type: 'text/plain' });
      let blobURL = window.URL.createObjectURL(blob);
      let obj = document.createElement('a');
      obj.href = blobURL;
      obj.download = `202109091200.csv`;
      document.body.appendChild(obj);
      obj.click();
      obj.parentNode.removeChild(obj);
    },
  },
  created() {
    this.text = this.csvData.map(e1 => e1.join(',')).join('\n');
  },
});

デモ

参考サイト

Blob - Web API | MDN