vue 前端将Excel表格导入，并解析成Json数据发送给后端

最新推荐文章于 2025-10-13 23:12:21 发布

原创最新推荐文章于 2025-10-13 23:12:21 发布 · 置顶 · 5.1k 阅读

38 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #excel

本文介绍如何使用前端技术实现Excel文件的上传与解析功能。通过定制化的input组件完成文件选择，并利用FileReader API读取文件内容。同时，借助xlsx库解析Excel文件为JSON数据，方便进一步处理。

首先我们通过input框的file进行上传

<span class="file-box">
	Excel上传
	<input 
	type="file" 
	accept=".xls,.xlsx" 
	class="upload-file" 
	@change="Excel($event)" />
</span>

修改样式让其变得漂亮一些，添加完样式，上传按钮就会变成这个的样子：

.file-box {
      position: relative;
      display: block;
      border: none;
      border-radius: 4px;
      background-color: #409eff;
      height: 35px;
      width: 98px;
      text-align: center;
      line-height: 35px;
      *zoom: 1;
      color: #FFFFFF;
    }
    .upload-file {
      font-size: 20px;
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
      filter: alpha(opacity=0);
      width: 100%;
    }
}

最后就是对上传的excel进行解析

首先，安装插件 npm install xlsx，安装完成后引入 import XLSX from ‘xlsx’

解析excel表格的方法，有详细注释，看不懂就复制看效果

Excel(e) {
    let that = this
    // 错误情况判断
    const files = e.target.files
    if (files.length <= 0) {
      return false;
    } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
      this.$message({
        message: "上传格式不正确，请上传xls或者xlsx格式",
        type: "warning"
      });
      return false
    } else {
      that.upload_file = files[0].name
    }
    // 读取表格
    const fileReader = new FileReader()
    fileReader.onload = ev => {
      try {
        const data = ev.target.result;
        const workbook = XLSX.read(data, {
          type: "binary"
        })
        // 读取第一张表
        const wsname = workbook.SheetNames[0]
        const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) 
        // 打印 ws 就可以看到读取出的表格数据
        console.log(ws)
        // 定义一个新数组，存放处理后的表格数据
        that.lists = []
        ws.forEach(item => {
          that.lists.push({
            // 对ws进行处理后放进lists内
          })
        })
        // 调用方法将lists数组发送给后端
        this.submit_form(that.lists)
      } catch (e) {
        return false
      }
    }
    fileReader.readAsBinaryString(files[0])
}
submit_from(data) {
	// 在这里发送数据
}