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文件操作，而且非常适合需要处理大量数据的场景。希望本文能够对大家有所帮助。