【Nuxt】Excelファイルを読み込む（vue-js-xlsx）

Excelファイルのデータをアップロードして、DBに登録する処理をしたいと思い、Nuxt.jsでExcelファイルを読み込むことができるようにしたので、備忘録として残しておく。

Nuxt.js：v2.15.8
Nuxt Buefy：v0.4.7
vue-js-xlsx：v0.0.2

vue-js-xlsx
インストール
Excelデータをjsonデータに変換する
実装例
（おまけ）VueでのCSVデータの読み込み
まとめ

vue-js-xlsx

今回は、Excelの表形式での表示や編集などは考えておらず、Excelファイルからデータを読み取ることができれば機能としては十分であったので、vue-js-xlsxを使うことにした。

以下の vue-xlsx はコンポーネントまであってとても使いやすそうではあったが、今回の使用においてはコンポーネントまでは不要であったので選択肢から除外した。（もし複数のシートからいずれかを選択するなどの処理が必要な場合は、vue-xlsxをオススメする。）

インストール

まずは、ライブラリをインストールする。

// npm
npm install --save vue-js-xlsx
// yarn
yarn add vue-js-xlsx

Nuxt.js（Vue.js）で使うことができるように設定する。
plugins/vue-js-xlsx.jsファイルを作成し、nuxt.config.js設定ファイルで読み込ませる。そうすることで、this.$xlsxでどこからでも読み出すことができる。

import Vue from 'vue'
import VueXlsx from 'vue-js-xlsx'
Vue.use(VueXlsx)

export default {
  ...
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [{
    src: '@/plugins/vue-js-xlsx.js',
    ssr: false
  }]
  ...
}

Excelデータをjsonデータに変換する

このライブラリ唯一の以下のメソッドを用いる。

const jsonData = this.$xlsx.toJson(data, options)

data[Blob]：Excelファイル
options[Object]：設定
- parsingOpts[Object]：読み取り時の設定
  - XLSX.read(data, read_opts)のParsing Optionsを指定する
  - type：Input data encodingを指定する
    - base64, binary, string, buffer, array, file
- sheetIndex[Number]：出力したいシート番号を指定する

実装例

UIライブラリに関しては、Nuxt Buefyを採用した。実装例では、Excelファイルを読み込み、console.logで出力して確認するまでになっている。

<template>
  <section class="section">
    <div class="box">
      <b-field label="ファイル（.xlsx）を選択してください">
        <b-upload
          v-show="!dropFile"
          v-model="dropFile"
          expanded
          drag-drop
          @input="arrangeData">
          <section class="section">
            <div class="content has-text-centered">
              <p>
                <b-icon
                  icon="upload"
                  size="is-large">
                </b-icon>
              </p>
              <p>Drop your files here or click to upload</p>
            </div>
          </section>
        </b-upload>
      </b-field>
      <div class="tags">
        <span class="tag is-info" v-if="!!dropFile" >
          {{dropFile.name}}
          <button
            class="delete is-small"
            type="button"
            @click="deleteDropFile">
          </button>
        </span>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      dropFile: null,
    }
  },
  methods: {
    deleteDropFile() {
      this.dropFile = null
    },
    arrangeData() {
      const reader = new FileReader()
      const load = () => {
        const jsonData = this.$xlsx.toJson(reader.result, {
          parsingOpts: {
            type: 'array'
          },
          sheetIndex: 1
        })
        console.log(jsonData)
        // jsonデータを必要な形に整形する
      }
      reader.onload = load
      reader.readAsArrayBuffer(this.dropFile)
    }
  }
}
</script>

（おまけ）VueでのCSVデータの読み込み

CSVデータを読み込む場合は、JSのライブラリのみで実装することができる。（今回、機能拡張をする前までは、CSVのみでの読み取りを可能としていた。）上記と異なるのは、以下のarrangeDataのmethodの部分のみである。

<script>
arrangeData() {
  const reader = new FileReader()
  const load = () => {
    const lines = reader.result.split('\n')
    console.log(lines)
    // 文字列データを必要な形に整形する
  }
  reader.onload = load
  reader.readAsText(this.dropFile)
}
</script>