vue 前端解析excel文件

最新推荐文章于 2025-04-18 09:06:30 发布

原创最新推荐文章于 2025-04-18 09:06:30 发布 · 459 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

vue 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种使用JavaScript异步读取Excel文件的方法，并将其内容解析为JSON格式。该过程首先检查是否选择了有效的文件，然后通过XLSX库读取文件内容，将工作表转换成JSON数据，最后提取JSON数据的键作为表头。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   //   保存excel数据
   async saveExcelData(){
   // 没有选择文件，无法解析
        if(this.fileList.length<1) {
          this.$message.error("你还没有选择文件！！")
          return false
        }

// 选择的文件
      let file = this.uploadFileForm.file;
      // console.log(file)
      if(!file){
        console.log("文件打开失败")
        return ;
      }else{
       let data = await this.readFile(file);
       let workbook = XLSX.read(data,{ type: "binary"});//解析二进制格式数据
       // console.log('二进制数据的解析:')
       // console.log(workbook)
       let worksheet = workbook.Sheets[workbook.SheetNames[0]];//获取第一个Sheet
       let result = XLSX.utils.sheet_to_json(worksheet);//json数据格式
       // console.log('最终解析的 json 格式数据:')
       // console.log(result)
       this.excelData.data = result
        if(this.excelData.data.length > 0) {
          let temHeader = this.excelData.data[0];
          for(const k in temHeader) {
            // console.log("key名称是："+k+",key的值是："+ temHeader[k])
            this.excelData.header.push(
            {"label":  k, "prop": k }
            )
          }
          // console.log(this.excelData)
        }
      }
    },