Nuxt.js Excelファイルを読み込む

【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

ライブラリをインストールする。

// 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でどこからでも読み出すことができる。

plugins/vue-js-xlsx.js

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

nuxt.config.js

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]：読み取り時の設定
    • sheetIndex[Number]：出力したいシート番号を指定する

実装例

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

plugins/index.vue

<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>

CSVデータの読み込みの場合

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

plugins/index.vue

<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>
これまでは、Excelデータを一度CSVデータに変換してから読み込みをさせていたので、直接Excelデータをアップロードすることができ、作業効率は格段に向上した

関連記事:

Nuxt.js -jsonからEXCELファイル作成  ECサイト構築例 Nuxt.js + Vue.js Nuxt.js、Vue.jsによるToDoのサンプル マークダウンを表示するサンプル ダッシュボード(ADMIN) Vue3でTypeScript実践 LP構築例 Nuxt.js + Vue.js Nuxt.js テクニック Nuxt.js(Vue.js)の「v-for」でコンポーネントをループさせる方法 v-forを指定回数でループさせ、なおかつ配列へアクセスする(Nuxt.js/Vue.js) Nuxt.js初心者がハンバーガーメニューを実装しながらv-onとかv-ifを学ぶ Nuxt-HEADタグ操作 ECサイト構築例 React.js Redux Next 時給計算用の勤怠管理テンプレート 計算式の説明が丁寧なEXCEL出勤簿テンプレート １週間表のガンチャート式テンプレート 売上管理テンプレート+分析 Nuxt.jsの特徴やメリット Nuxt.js 入門 (1) – 最初の一歩 Nuxt.js 入門 (2) – プロジェクト作成 Vue.js テクニック 簡単な例で始めるVue3でTypeScript入門 Vue.jsによるカート・サンプル 【Nuxt.js】Nuxt.jsでJSONファイル表示 Vue.jsによるChat・サンプル Vue.jsによるTable・サンプル Vue.jsによるChart-Dashboard・サンプル ダッシュボード
,,,,,,