elementui表格导入导出-vue+element导入excel数据并转换为json存入el-table

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

项目开发过程中有一个需求。 仓库系统入库时，需求是将填写好的入库单excel表格直接导出到vue后端页面并显示。 如果没有问题的话，就会以表格的形式存储在数据库中。

在页面上显示excel表格的内容，经过不懈的学习总结（借鉴专家的经验，自己总结）

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

然后达到如下效果：

效果大致是这样，需求已经整理好了。 接下来是我总结的直接可用的代码。

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

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

然后是js方式：

首先在backend文件夹中安装一个工具，直接运行命令。

npm 安装 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  {
        const obj = {}
       obj.pinmuName = v.物资品目
        arr.push(obj)
      })
      _this.tableData = _this.tableData.concat(arr)
    }
  },
}

outdata是从excel表格中的第一张表中读取的数据。 到前台复制即可得到对应的数组。

这里的obj是获取表中的数据并将表单参数需要的数组和值直接赋值给obj对象，然后push到字段中，然后 _this.tableData = _this.tableData.concat(arr ) 传回一个对象给表单，从而实现导出数据并显示在页面上的功能。 其他的小细节可以根据自己的需求来实现。 比如表中有一个时间格式elementui表格导入导出elementui表格导入导出，收到后很难存入数据库，可以通过循环将时间改成对应的格式（虽然比较笨，但有效）

就这样结束了，希望对你有帮助。