XLSXVue教程：如何使用Vue.js讀取和操作Excel文件

在日常的開發工作中，我們會經常遇到需要讀取和操作Excel文件的情況。如果使用純JavaScript或jQuery來實現這一功能，會比較繁瑣和複雜。而使用Vue.js可以簡化這個過程，並且提供更好的用戶體驗。下面將為大家詳細介紹如何使用Vue.js讀取和操作Excel文件。

一、引入xlsx組件庫

在使用Vue.js讀取和操作Excel文件之前，我們需要先安裝並引入xlsx組件庫。

npm install --save xlsx

在組件中引入xlsx組件庫：

import XLSX from 'xlsx'

二、讀取Excel文件

在Vue.js中，使用<input type=”file”/>標籤可以讓用戶選擇本地文件上傳。然後使用FileReader API將文件讀入內存。接下來，我們需要使用XLSX組件庫的方法來解析Excel文件。

下面是讀取Excel文件的代碼示例：

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <table>
      <tr v-for="(item, index) in data" :key="index">
        <td v-for="(value, key) in item" :key="key">{{ value }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  data () {
    return {
      data: []
    }
  },
  methods: {
    onFileChange (event) {
      let fileList = event.target.files
      const reader = new FileReader()
      reader.onload = (e) => {
        const data = e.target.result
        let workbook = XLSX.read(data, { type: 'binary' })
        let sheet_name_list = workbook.SheetNames
        let worksheet = workbook.Sheets[sheet_name_list[0]]
        let jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
        this.data = jsonData.map((item) => ({
          date: item[0],
          category: item[1]
        }))
      }
      reader.readAsBinaryString(fileList[0])
    }
  }
}
</script>

三、操作Excel文件

讀取完畢之後，我們可以對Excel文件進行一些操作。比如，篩選、排序、添加等等。下面是一個示例，可以根據時間篩選出數據。

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <select v-model="selectDate">
      <option v-for="date in dateList" :key="date" :value="date">{{ date }}</option>
    </select>
    <table>
      <tr v-for="(item, index) in filterData" :key="index">
        <td v-for="(value, key) in item" :key="key">{{ value }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  data () {
    return {
      data: [],
      selectDate: '',
      filterData: []
    }
  },
  methods: {
    onFileChange (event) {
      let fileList = event.target.files
      const reader = new FileReader()
      reader.onload = (e) => {
        const data = e.target.result
        let workbook = XLSX.read(data, { type: 'binary' })
        let sheet_name_list = workbook.SheetNames
        let worksheet = workbook.Sheets[sheet_name_list[0]]
        let jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
        this.data = jsonData.map((item) => ({
          date: item[0],
          category: item[1]
        }))
        this.dateList = Array.from(new Set(this.data.map((item) => item.date)))
        this.selectDate = this.dateList[0]
      }
      reader.readAsBinaryString(fileList[0])
    }
  },
  computed: {
    filterData () {
      return this.data.filter((item) => item.date === this.selectDate)
    }
  }
}
</script>

四、導出Excel文件

除了能夠讀取Excel文件，Vue.js還可以用於導出Excel文件。我們可以使用SheetJS組件庫的方法將數據導出為Excel文件。下面是一個導出Excel文件的代碼示例：

<template>
  <div>
    <button @click="exportExcel">導出</button>
  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  data () {
    return {
      exportData: [
        [ '姓名', '年齡', '性別', '職業', '愛好' ],
        [ '小紅', '25', '女', '程序猿', '游泳, 打乒乓球' ],
        [ '小明', '22', '男', '產品經理', '閱讀, 看電影' ],
        [ '小王', '23', '男', 'UI 設計師', '畫畫, 玩遊戲' ]
      ]
    }
  },
  methods: {
    exportExcel () {
      const wb = XLSX.utils.book_new()
      const ws = XLSX.utils.aoa_to_sheet(this.exportData)
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
      XLSX.writeFile(wb, '導出的文件.xlsx')
    }
  }
}
</script>

五、小結

以上就是使用Vue.js讀取和操作Excel文件的全部內容了。不難發現，使用Vue.js能夠輕鬆地實現複雜的Excel文件操作，而且非常適合需要處理大量數據的場景。希望本文能夠對大家有所幫助。