关于javascript:Day7100-前端实现解析Excel等文件

前言

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

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