vue+element 导入excel数据并转化为json存入el-table

项目开发过程中有个需求，仓库系统入库的时候需求是把填好的入库单excel表格直接导入到vue前端页面上，并展示出来，没有问题的话以表单的形式存入数据库。

将excel表格内容展示到页面中，经过不懈的学习 特意总结一下子（学习前辈经验，自我总结）

要实现的功能是，通过点击el-button按钮 上传一个xslx格式的文件

 

 然后达到如下的效果：

 效果大概就是这样，需求也已经梳理清楚 接下来就是我总结的直接可以使用的代码

vue的代码主要是这样子的（与我实际版本相比阉割）

 <el-upload
    class="upload-demo"
    action=""
    :on-change="handleChange"
    :show-file-list="false"
    :auto-upload="false">
    <el-button size="small" type="primary" style="margin-bottom:15px;">读取excel文件</el-button>
  </el-upload>
  <el-table
    :data="tableData"
    style="width: 100%">
  <el-table-column
                prop="id"
                label="序号"
                v-if="false"
            ></el-table-column>
            <el-table-column
                prop="pinleiName"
                label="物资品类"
            ></el-table-column>
  </el-table>

1. action 属性必须要有，可以为空，但是不能没有，不然控制台会报错
2. 钩子函数必须是 on-change 这个钩子，只有这个钩子可以添加文件，其他都是上传，

然后就是js的方法：

首先现在前端文件夹安装一个工具，直接运行命令

npm install xlsx

// data 部分的数据
data () {
  return {
    tableData: [],
    fileContent: '',
    file: '',
    data: ''
  }
},
// 处理方法(核心部分)
methods: {
// 核心部分代码(handleChange 和 importfile)
handleChange (file) {
  this.fileContent = file.raw
  const fileName = file.name
  const fileType = fileName.substring(fileName.lastIndexOf('.') + 1)
    if (this.fileContent) {
      if (fileType === 'xlsx' || fileType === 'xls') {
        this.importfile(this.fileContent)
      } else {
        this.$message({
          type: 'warning',
          message: '附件格式错误，请重新上传！'
        })
      }
    } else {
      this.$message({
        type: 'warning',
        message: '请上传附件！'
      })
    }
  },
 importfile (obj) {
   const reader = new FileReader()
   const _this = this
   reader.readAsArrayBuffer(obj)
   reader.onload = function () {
     const buffer = reader.result
     const bytes = new Uint8Array(buffer)
     const length = bytes.byteLength
     let binary = ''
     for (let i = 0; i < length; i++) {
       binary += String.fromCharCode(bytes[i])
     }
      const XLSX = require('xlsx')
      const wb = XLSX.read(binary, {
        type: 'binary'
      })
      const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
      this.data = [...outdata]
      const arr = []
      this.data.map(v => {
        const obj = {}
       obj.pinmuName = v.物资品目
        arr.push(obj)
      })
      _this.tableData = _this.tableData.concat(arr)
    }
  },
}

outdata是从excel表格里第一个sheet里读取到的数据，前台打印一下获得对应字段

 

此处的obj便是获取表格中的数据进行给表单赋值需要什么字段和值就直接赋给obj对象，然后push进数组中，再_this.tableData = _this.tableData.concat(arr) 把若干个对象传回给表单，从而实现导入数据并显示在页面的功能。其余一些小细节可以根据自己的需求来实现。比如表格中有时间格式的但是拿到之后无法存入数据库，那就可以通过循环把时间修改成相应的格式（虽然傻瓜但是有效）

总结至此，希望对大家有所帮助。