前端导入表格

<el-upload
            class="upload-demo"
            action=""
            :on-change="handleChange"
            :on-exceed="handleExceed"
            :on-remove="handleRemove"
            :limit="1"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
            :auto-upload="false">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只 能 上 传 xlsx / xls 文 件</div>
          </el-upload>
 private handleChange(file: any){
      this.fileTemp = file.raw;
      if(this.fileTemp){
          if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || (this.fileTemp.type == 'application/vnd.ms-excel')){
              this.importfxx(this.fileTemp)
          } else {
              this.$message({
                  type:'warning',
                  message:'附件格式错误,请删除后重新上传!'
              })
          }
      } else {
          this.$message({
              type:'warning',
              message:'请上传附件!'
          })
      }
    }

    private importfxx(obj: any) {
    let _this = this;
    // 通过DOM取文件数据
    this.file = obj
    var rABS = false; //是否将文件读取为二进制字符串
    var f = this.file;
    var reader = new FileReader();
    FileReader.prototype.readAsBinaryString = function(f) {
        var binary = "";
        var rABS = false; //是否将文件读取为二进制字符串
        var pt = this;
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
        /*
        在读取后,触发的事件,并获取读取文件的地址
        */
        reader.onload = function(e) {
        //返回的结果为reader.result是类型化数组
        var bytes = new Uint8Array(reader.result);
        var length = bytes.byteLength;
        for(var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]); //将 Unicode 编码转为一个字符:
        }

        var XLSX = require('xlsx');
        if(rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), { //手动转化
                type: 'base64'
            });
        } else {
            wb = XLSX.read(binary, {
                type: 'binary'
            });
        }
        outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata就是你想要的东西
            // this.da = [...outdata]
            // let arr = []
            // this.da.map(v => {
            //     let obj = {}
            //     obj.name = v['姓名']
            //     obj.phone = v['电话']
            //     obj.addres = v['地址']
            //     arr.push(obj)
            // })
            // return arr
            console.log(outdata);
            
        }
        //开始读取指定的Blob中的内容,一旦完成,result属性中保存的将是被读取文件的
        reader.readAsArrayBuffer(f);
    }

    if(rABS) {
        reader.readAsArrayBuffer(f);
    } else {
        reader.readAsBinaryString(f);
    }
  }

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想将纯前端的数据导入到一个表格中,可以使用如下的步骤: 1. 创建一个空的 HTML 表格,可以使用 `<table>` 标签来创建。 2. 在 JavaScript 中,创建一个数组,用于存储你想要导入的数据。 3. 使用 JavaScript 循环遍历数组中的数据,创建一个新的行和列,并将数据添加到表格中。 4. 将表格添加到 HTML 文档中,这可以通过获取页面中的元素,并使用 `appendChild()` 方法将表格添加到该元素中来完成。 下面是一个简单的示例代码,可以将一个包含学生姓名和成绩的数组导入表格中: ```html <!DOCTYPE html> <html> <head> <title>导入数据到表格</title> </head> <body> <table id="myTable"> <thead> <tr> <th>姓名</th> <th>成绩</th> </tr> </thead> <tbody> </tbody> </table> <script> // 创建一个包含学生信息的数组 var students = [ { name: '张三', score: 90 }, { name: '李四', score: 85 }, { name: '王五', score: 92 } ]; // 获取表格中的 tbody 元素 var tbody = document.querySelector('#myTable tbody'); // 循环遍历数组中的数据,创建新的行和列,并将数据添加到表格中。 for (var i = 0; i < students.length; i++) { var student = students[i]; var tr = document.createElement('tr'); var tdName = document.createElement('td'); var tdScore = document.createElement('td'); tdName.textContent = student.name; tdScore.textContent = student.score; tr.appendChild(tdName); tr.appendChild(tdScore); tbody.appendChild(tr); } </script> </body> </html> ``` 在这个示例中,首先创建了一个包含学生信息的数组。然后,通过获取表格中的 tbody 元素,循环遍历数组中的数据,并创建一个新的行和列。最后,将行和列添加到表格中。这样,就可以将数据导入表格中了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值