前端代码 读取excel表格数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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>

  

1
import XLSX from 'xlsx';

  

1
2
3
4
5
6
7
8
9
10
// 定义data
data () {
    return {
      fileObj: {
        '用户名': 'name',
        '密码': 'code',
        '号码': 'phone'
      }
    }
  },

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// 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]);
        
    },

  

posted @   soon_k  阅读(741)  评论(0编辑  收藏  举报
编辑推荐:
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
阅读排行:
· DeepSeek V3 两周使用总结
· 回顾我的软件开发经历(1)
· C#使用yield关键字提升迭代性能与效率
· 低成本高可用方案!Linux系统下SQL Server数据库镜像配置全流程详解
· 4. 使用sql查询excel内容
点击右上角即可分享
微信分享提示