vue + elementui 实现前端读取 excel 表格内容

vue + elementui 实现前端读取 excel 表格内容

最近公司有个需求，将excel表格内容展示到页面中，然后查看展示出来的内容没有问题，再将内容上传到服务端
网上有很多方法，但是楼主并未找到一个适合自己的(搜到的都不怎么好用)，所以自己结合网上其他前辈的文章，总结了一份可以直接拿来使用的，希望能帮助到需要的人

我们要实现的效果是点击<el-button>按钮，然后选择excel文件，读取excel文件中的内容，并将内容展示到<el-table>表格中

以上就是我们要实现的效果，接下来我们就准备正式开始撸代码了

首先，页面当中HTML中的代码是这样的

<div class="excel">
  <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="ip" label="序号" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <a @click="handleDelete(scope)">删除</a> |
        <a @click="handelEdit(scope)">修改</a>
      </template>
    </el-table-column>
  </el-table>
</div>
<!--
注意：上面代码有以下 2 个需要注意的点
	1. action 属性必须要有，可以为空，但是不能没有，不然控制台会报错
	2. 钩子函数必须是 on-change 这个钩子，只有这个钩子可以添加文件，其他都是上传，具体可以看[elementtui官方文档的介绍](https://element.eleme.io/#/zh-CN/component/upload)
-->

其次，就是js部分的代码了

注意：在开始js部分代码之前，我们还需要安装一个xlsx工具，下面会用到

// 直接 npm 安装即可
npm install xlsx

然后，下面就是真正js代码的部分了

// data 部分的数据
data () {
  return {
    tableData: [],
    fileContent: '',
    file: '',
    data: ''
  }
},
// 处理方法(核心部分)
methods: {
// 注意：handleDelete 和 handelEdit 这两个方法其实是无关紧要的，只不过我的处理逻辑中有 修改 和 删除 这两个功能，不写的话，会报错
  handleDelete (item) {
    console.log('handleDelete', item)
  },
  handelEdit (item) {
    console.log('handleDelete', item)
  },
// 核心部分代码(handleChange 和 importfile)
handleChange (file, fileList) {
  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.ip = v.IP
        obj.name = v.NAME
        arr.push(obj)
      })
      _this.tableData = _this.tableData.concat(arr)
    }
  },
}

好了，以上就是全部的关于代码的内容了，至于页面的样式调整，大家就按照自己的需求来写就可以了，关于css的代码这里我就不列出来了，当然，这对于大家来说也是小case

如果对于这边文章，有什么不对的地方，欢迎大家指出，楼主看到会在第一时间进行修改，前端之路漫长而悠远，希望我们能一起进步，一起成长。

注意：

1. 浏览器报错：Uncaught ReferenceError: require is not defined

• 情况说明：如果你是在自己的电脑上新建了一个html文件，并不是在项目中使用，那么浏览器会报这个错误(除非你自己用webpack进行了配置)；如果你是在vue项目中使用，应该是看不到这个错误的，因为vueCLI3自带的webpack会自己处理，不需要我们做什么
• 原因：浏览器并不能识别require，require在nodejs中可以直接使用，但是在本地html文件中不能直接使用，因为浏览器不认识
• 解决方式：<script lang="javascript" src="./node_modules/xlsx/dist/xlsx.core.min.js"></script>实际引入路径根据自己本地文件进行相应调整
• 浏览器报错小结：一句话，如果你是直接将代码copy到了一个html文件中，想看一下效果，那么需要通过script标签来引入用到的xlsx文件，如果是通过vueCLI3创建的项目，那么注意里面我说的这一堆废话，你就不用看啦