通过el-upload结合xlsx获取表格数据

安装XLSX

在项目中安装XLSX：

npm install xlsx --save

解析数据

通过el-upload上传excel表格文件，代码如下：

	<el-upload action=""
               :before-remove="beforeRemove"
               multiple :show-file-list="false"
               style="display: contents" accept=".xls,.XLS,.xlsx,.XLSX"
               :limit="3"
               :on-exceed="handleExceed"
               :http-request="httpRequest">
      <el-button size="mini" style="margin-left: 10px">EXCEL导入</el-button>
    </el-upload>

在项目中引入xlsx：

import XLSX from 'xlsx'

获取上传表格文件的数据函数：

	httpRequest (e) {
     
      let file = e.file // 文件信息
      if (!file) {
     
        return false
      } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
     
        // 格式根据自己需求定义
        this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
        return false
      }
      const fileReader = new FileReader()
      fileReader.onload = (ev) => {
     
        try {
     
          const data = ev.target.result
          const workbook = XLSX.read(data, {
     
            // 以字符编码的方式解析
            type: 'binary'
          })
          // 取第一张表
          console.log(workbook)
          const exlname = workbook.SheetNames[0]
          const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
          console.log(exl)
          // 将 JSON 数据挂到 data 里
          let arr = []
          exl.forEach(item => {
     
            arr.push(item.name)
          })
          console.log(arr)
        } catch (e) {
     
          console.log('error')
          return false
        }
      }
      fileReader.readAsBinaryString(file)
    }

表格数据如下：

解析得到的表格JSON数据结构如下：

下载模板

给按钮注册点击事件：

<el-button size="mini" @click="load">下载模板excel</el-button>

响应函数代码如下（如果表格名存在中文，需要先对文件路径进行处理，处理方法encodeURI）：

	load () {
     
	  console.log(encodeURI('/static/test.xlsx'))
      // window.location = '/static/test.xlsx'
      location.href = '/static/test.xlsx'
    }

完整项目代码：

<template>
  <div style="position:relative;">
    <el-upload action=""
               :before-remove="beforeRemove"
               multiple :show-file-list="false"
               style="display: contents" accept=".xls,.XLS,.xlsx,.XLSX"
               :limit="3"
               :on-exceed="handleExceed"
               :http-request="httpRequest">
      <el-button size="mini" style="margin-left: 10px">EXCEL导入</el-button>
    </el-upload>
    <el-button size="mini" @click="load">下载模板excel</el-button>
  </div>
</template>
<script>
import XLSX from 'xlsx'
export default {
     
  methods: {
     
    beforeRemove (file, fileList) {
     
      return this.$confirm(`确定移除 ${
       file.name}？`)
    },
    handleExceed (files, fileList) {
     
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${
       files.length} 个文件，共选择了 ${
       files.length + fileList.length} 个文件`)
    },
    httpRequest (e) {
     
      let file = e.file // 文件信息
      if (!file) {
     
        return false
      } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
     
        // 格式根据自己需求定义
        this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
        return false
      }
      const fileReader = new FileReader()
      fileReader.onload = (ev) => {
     
        try {
     
          const data = ev.target.result
          const workbook = XLSX.read(data, {
     
            // 以字符编码的方式解析
            type: 'binary'
          })
          // 取第一张表
          console.log(workbook)
          const exlname = workbook.SheetNames[0]
          const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
          console.log(exl)
          // 将 JSON 数据挂到 data 里
          let arr = []
          exl.forEach(item => {
     
            arr.push(item.name)
          })
          console.log(arr)
        } catch (e) {
     
          console.log('error')
          return false
        }
      }
      fileReader.readAsBinaryString(file)
    },
    load () {
     
      console.log(encodeURI('/static/test.xlsx'))
      // window.location = '/static/test.xlsx'
      location.href = '/static/test.xlsx'
    }
  }
}
</script>