Nuxt.js + Vue.jsでvue-json-to-csvを使ってCSVダウンロードする方法をメモしておきます。
公式：https://www.npmjs.com/package/vue-json-to-csv
vue-json-to-csvのインストールと初期設定
まず、vue-json-to-csvをインストールします。
1 | $ npm i vue-json-to-csv |
vue-json-to-csvを使用するためにplugins配下にvue-json-to-csv.jsファイルを生成して、componentで使えるようにしておきます。
・plugins/vue-json-to-csv.js
1 2 3 4 | import Vue from 'vue' import VueJsonToCsv from 'vue-json-to-csv' Vue.component('VueJsonToCsv', VueJsonToCsv) |
nuxt.config.jsのpluginsに作成したファイルのパスを追記します。
・nuxt.config.js
1 2 3 4 5 6 7 | ... plugins: [ { src: '@/plugins/vue-json-to-csv.js' } ], ... |
vue-json-to-csvでCSVダウンロードを実装
実際にCSVダウンロードしてみます。コンポーネントとして使えるようにしたVueJsonToCsvを使ってbuttonタグを囲います
VueJsonToCsvのjson-dataはCSVのデータとして出力され、labelsはCSVの列名として出力され、csv-titleはCSVファイル名になります。
他にもオプションがあり、詳しくは公式サイトを参照してください。
公式：https://www.npmjs.com/package/vue-json-to-csv
・pages/books.vue
1 2 3 4 5 6 7 8 9 | <VueJsonToCsv :json-data="books" :labels="labels" :csv-title="title" > <button @click="download"> CSVダウンロード </button> </VueJsonToCsv> |
今回は例として、CSVダウンロードをクリックするとdownloadメソッドによって、computedで取得していたbookDatasからbooksにCSVで必要なデータを渡しています。
labelsは列名としてnameを本のタイトル、authorを著者として表示されるようにしています。
CSVファイル名は、moment.jsを使って「本のCSVデータ_現在日時」となるようにしています。
・pages/books.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | ... data () { return { title: '本のCSVデータ_' + moment().format('YYYY年MM月DD日HH:mm'), labels: { name: { title: '本のタイトル' }, author: { title: '著者' } }, books: [] } }, computed: { ...mapGetters(books, [bookDatas]) }, methods: { download () { this.bookDatas.forEach((book) => { this.books.push({ name: book.name, author: book.author }) }) } } ... |