js中导入excel文件并转换为json格式的数据

╰半橙微兮° 2022-09-01 14:45 205阅读 0赞

> 选择的包为 `xlsx`一个 js 库

测试结合 Vue + ElementUI一起使用。

*  先安装对应依赖

npm i xlsx --save

*  引入 elementUI 后，使用 `upload` 上传组件来实现文件导入

<el-upload 
        ref="upload" 
        accept=".xls,.xlsx"
        action=""
        :auto-upload="false"
        :on-change="handleUpload" 
        :show-file-list="false">
        <el-button>EXCEL 导入</el-button>
    </el-upload>

*  编写读取 `excel` 文件的方法

<script>
      // 先导入 xlsx 
      import XLSX from 'xlsx'
      export default { 
        methods: { 
          readExcel (file) { 
            const type = file.name.split('.')[1]
            if (!['xlsx', 'xls'].includes(type)) { 
              this.$message({  type: 'warning', message: '文件格式错误！请重新选择' })
              return
            }
    
            const reader = new FileReader()
            const result = [] // 保存转化成功的 json格式
            reader.onload = e => { 
              const data = e.target.result
              const wb = XLSX.read(data, { 
                type: 'binary'
              })
              // 这里需要遍历，因为 excel 左下角有多张 sheet 表，如果只需要第一张表就不用遍历
              wb.SheetNames.forEach((sheetName) => { 
                  result.push({ 
                    sheetName: sheetName,
                    sheet: XLSX.utils.sheet_to_json(wb.Sheets[sheetName]) // 生成JSON表格内容
                  })
              })
                
              // 处理 json 格式数据
              const test = []
              for (let item of result) { 
                let time = null
                // excel导出json格式数据中有关时间的转换（因为导出json的时间格式为数字了，所以需要转换）
                if (typeof item['时间'] === 'number') { 
                  time = new Date(1900, 0, item['时间'] - 1).toLocaleDateString()
                }
              }
              console.log(test)
            }
            reader.readAsBinaryString(file.raw)
          },
          handleUpload (file) { 
            this.readExcel(file)
          }
        }
      }
    </script>

*  上传文件改变调用方法

methods: { 
        handleUpload (file) { 
            this.readExcel(file) // 如果在这里接收导出的 json 数据的话，会拿不到预期结果
        }
    }

导入excel文件为 json 格式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]  
补充：  
js 跳出循环使用 for of等

let test = []
    for (let item of result) { 
        for (let i of Object.keys(item)) { 
          if (!formatCh.includes(i)) { 
            this.$message({  type: 'warning', message: `表头 “${ i}” 格式错误，请重新上传!` })
            return false
          }
        }
        // 数组对象替换对象的 key 值
        test.push({ 
          name: String(item.name),
          unit: item.unit
        })
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]: /images/20220829/1ea1ea04bde54a8887dac9a3a0ece9e1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，205人围观）

还没有评论，来说两句吧...

相关阅读

相关一些数据格式的转换（JAVA以及JS）

\[JAVA\] 日期类型：Sat Oct 08 18:57:38 CST 2022转化为2022年10月08日 18时57分38秒 Calendar calendar

浅浅的花香味﹌/ 2024年04月01日 09:19/ 0 赞/ 80 阅读

相关三、导入csv格式的excel

package com.cmdi.dataloader; import java.io.BufferedReader; import java

一时失言乱红尘/ 2024年02月17日 14:22/ 0 赞/ 59 阅读

相关二、可以导入xlsx格式的Excel

二、可以导入xlsx，是我同事的没仔细看需要的可以研究下首先要导入poi 和poi-ooxml的jar包 package com.cmdi.dataloader;

妖狐艹你老母/ 2024年02月17日 14:22/ 0 赞/ 43 阅读

相关 js中导入excel文件并转换为json格式的数据

> 选择的包为 `xlsx`一个 js 库测试结合 Vue + ElementUI一起使用。先安装对应依赖 npm i xlsx --save

╰半橙微兮°/ 2022年09月01日 14:45/ 0 赞/ 206 阅读

相关通过Ajax技术，将数组类型数据转换为JSON格式的对象

一、在服务器端将list类型数据放入JSON对象中的方法 tjyjList=PxcscjbDAO.getTjyjList(pxcscjbQOMap);

左手的ㄟ右手/ 2022年07月17日 02:29/ 0 赞/ 238 阅读

相关 JavaScript和json对数据格式的转换

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

小灰灰/ 2022年06月03日 10:10/ 0 赞/ 273 阅读

相关利用 js-xlsx 实现 Excel 文件导入并解析Excel数据成json格式的数据并且获取其中某列数据

工作中遇到excel读取,记录下 <!DOCTYPE html> <html> <head> <meta charset="UTF

本是古典何须时尚/ 2022年05月15日 01:09/ 0 赞/ 267 阅读

相关 hive中导入json格式的数据（hive分区表）

hive中建立外部分区表，外部数据格式是json的如何导入呢？ json格式的数据表不必含有分区字段，只需要在hdfs目录结构中体现出分区就可以了 This is all

向右看齐/ 2022年01月26日 07:09/ 0 赞/ 423 阅读

相关利用js-xlsx.js插件实现Excel文件导入并解析Excel数据成json数据格式

<!DOCTYPE html>

深藏阁楼爱情的钟/ 2021年09月29日 03:02/ 0 赞/ 576 阅读

相关 python将json格式的数据转换成文本格式的数据或sql文件

python如何将json格式的数据快速的转化成指定格式的数据呢？或者转换成sql文件？下面的例子是将json格式的数据准换成以#_#分割的文本数据，也可用于生成sq...

你的名字/ 2021年04月23日 15:46/ 0 赞/ 632 阅读