zoukankan      html  css  js  c++  java
  • 前端代码 读取excel表格数据

    // dom
    <el-form-item label="批量录入:">
            <div class="upload-button-box">
              <input
                v-if="!fileName"
                type="file"
                ref="upload"
                accept=".xls,.xlsx"
                @change="readExcel"
                class="upload-button"
              />
              <el-button v-if="!fileName" size="small" type="primary">上传文件</el-button>
              <span v-else>{{ fileName }}</span>
              <span class="tips">支持扩展名:.xls .xlsx,且不超过100M</span>
            </div>
    </el-form-item>
    

      

    import XLSX from 'xlsx';
    

      

    // 定义data
    data () {
        return {
          fileObj: {
            '用户名': 'name',
            '密码': 'code',
            '号码': 'phone'
          }
        }
      },
    

      

    // function
    readExcel (e) {
          const files = e.target.files;
     
          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表格内容
              // const ws1 = XLSX.utils.sheet_to_slk(workbook.Sheets[wsname]) // 输出表格对应位置是什么值
              // const ws2 = XLSX.utils.sheet_to_html(workbook.Sheets[wsname]) // 生成HTML输出
              // const ws3 = XLSX.utils.sheet_to_csv(workbook.Sheets[wsname]) // 生成分隔符分隔值输出
              // const ws4 = XLSX.utils.sheet_to_formulae(workbook.Sheets[wsname]) // 生成公式列表(具有值回退)
              // const ws5 = XLSX.utils.sheet_to_txt(workbook.Sheets[wsname]) // 生成UTF16格式的文本
     
              this.excelData = []; // 清空接收数据
              for (let i = 0; i < ws.length; i++) {
                let sheetData = ws[i] // 对数据自行操作
                this.excelData.push(sheetData)
              }
          // 针对特殊数据转换可在这里处理
              this.excelData = this.excelData.map(item => {
                let obj = {};
                for(let key in item){
                  let oKey = this.fileObj[key];
                  let txt = item[key];
                  obj[oKey] = txt;
                }
                return {
                  ...obj
                }
              })
              if(this.excelData.length) {
                this.fileName = files[0].name;
              }
            } catch (e) {
              console.log(e)
              return false
            }
          }
          fileReader.readAsBinaryString(files[0]);
           
        },
    

      

  • 相关阅读:
    WPF使用Mutex创建单实例程序失效
    招式百出的数组(js)
    js中,如何把一个混杂的字符串进行去重并按数字在左,字母在右组成的新字符串打印出来
    字符串对象(js)
    时间对象(js)
    数组迭代的5个小宝贝(js)
    线程的状态
    线程
    JAVA学习规划
    简单的反射实例
  • 原文地址:https://www.cnblogs.com/soonK/p/13395737.html
Copyright © 2011-2022 走看看