Vue实现导入Excel功能步骤详解

首先我们需要在Vue项目中安装两个依赖：xlsx和file-saver。分别是用于解析Excel和保存文件的。

npm install xlsx file-saver

安装完毕后，在需要导入Excel的页面中，首先需要创建一个上传文件的组件，并绑定一个点击事件。

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFile"/>
    <button @click="importExcel">导入Excel</button>
  </div>
</template>

然后我们需要编写handleFile方法，用于处理选择的文件。在这个方法中，我们需要将文件转化为二进制数据，然后将该数据存储到data中，用于导入时使用。

export default {
  ...
  data() {
    return {
      fileData: null
    }
  },
  methods: {
    handleFile() {
      const file = this.$refs.fileInput.files[0]
      const reader = new FileReader()
      reader.onload = (e)  =>  {
        const data = e.target.result
        this.fileData = data
      }
      reader.readAsBinaryString(file)
    }
  }
}

最后，我们需要编写导入Excel的方法。这里我们使用到了xlsx的read方法，将我们存储的二进制数据解析成一个JSON对象。

import { read } from 'xlsx'
import { saveAs } from 'file-saver'

export default {
  ...
  methods: {
    ...
    importExcel() {
      const wb = read(this.fileData, { type: 'binary' })
      const ws = wb.Sheets[wb.SheetNames[0]]
      const data = JSON.parse(JSON.stringify(ws, ['!ref', 'v']))

      // 处理解析出来的数据, 进行你的相关业务逻辑处理

      // 示例：将解析出的数据导出为excel文件
      const xlsData = [['姓名', '年龄'], ['张三', 18], ['李四', 20], ['王五', 22]]
      const wsName = '导出数据'
      const wb = { SheetNames: [wsName], Sheets: {} }
      wb.Sheets[wsName] = Object.assign({}, xlsData, { '!ref': `A1:B${xlsData.length + 1}` })
      const wbOut = read(wb, { bookType: 'xlsx', type: 'binary' })
      saveAs(new Blob([s2ab(wbOut)], { type: 'application/octet-stream' }), '导出数据.xlsx')
      this.fileData = null
    }
  }
}

以上就是实现Vue导入Excel的主要步骤了。需要注意的是，在导出时，我们需要编写saveAs方法，用于在浏览器中下载生成的Excel文件。并且在编写wb对象时，需注意!ref属性的设置。这个值代表了Excel表格数据区域的大小，需要保证其与实际存储的数据大小一致。

所以，通过上述代码，我们可以成功实现Vue导入Excel的功能。

示例1：

比如说，我们在handleFile方法中可以添加一段代码，将解析出来的数据打印出来，在浏览器console面板查看解析结果。

export default {
  ...
  methods: {
    handleFile() {
      ...
      reader.onload = (e) => {
        const data = e.target.result
        this.fileData = data
        const wb = read(data, { type: 'binary' })
        const ws = wb.Sheets[wb.SheetNames[0]]
        const json = JSON.stringify(ws, ['!ref', 'v'])
        console.log(JSON.parse(json))
      }
      ...
    }
  }
}

示例2：

再比如说，我们可以将解析出来的数据渲染到页面上。这里我使用iview组件库中的table组件，用于展示表格数据。

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFile"/>
    <button @click="importExcel">导入Excel</button>
    <Table :columns="columns" :data="tableData"></Table>
  </div>
</template>

<script>
import { read } from 'xlsx'
import { saveAs } from 'file-saver'
import { Table } from 'iview'

export default {
  components: {
    Table
  },
  data() {
    return {
      fileData: null,
      columns: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '年龄',
          key: 'age'
        }
      ],
      tableData: []
    }
  },
  methods: {
    ...
    importExcel() {
      ...
      this.tableData = []
      for (let i = 1; i < data.length; i++) {
        this.tableData.push({
          name: data[i][0],
          age: data[i][1]
        })
      }
    }
  }
}
</script>

在这个示例中，我将解析出来的Excel数据存储到了tableData中，并将其渲染到了页面的表格中，方便用户查看。