前言

忽然来了需要，要求前端解析出上传文件中的数据，回显到页面上。以前始终是借助后端的帮忙，查了下材料发现前端有插件能够实现，备忘下~

1、可解析文件

2、反对框架

3、安装包

npm install xlsx

4、相干代码

1）HTML局部

<div >    {{ upload_file || "导入" }}    <input type="file" accept=".xls,.xlsx" class="upload_file" @change="readExcel($event)"/></div>

2）data 局部

import XLSX from "xlsx";//须要引入包data () {    return {      upload_file:'',      data:[],    }},

3）办法实现局部

    readExcel(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]); //生成json表格内容          that.lists = [];          console.log('ws',ws);          // 从解析进去的数据中提取相应的数据          ws.forEach(item => {            that.data.push({              value_id: 0,              value_show_name: item.show_name,              value_name: item.name,              value_color: item.color,              is_deleted: '0'            });          });          that.visibleUp=false;          // 给后端发申请          // this.submit_form();        } catch (e) {          return false;        }      };      fileReader.readAsBinaryString(files[0]);    }

参考链接

1、npmjs -xlsx 介绍
2、参考demo