利用JavaScript将Excel转换为JSON示例代码

程序员文章站 2023-12-01 21:54:58

前言 json是码农们常用的数据格式，轻且方便，而直接手敲json却是比较麻烦和令人心情崩溃的（因为重复的东西很多），所以很多码农可能会和我一样，选择用excel去输入数...

前言

json是码农们常用的数据格式，轻且方便，而直接手敲json却是比较麻烦和令人心情崩溃的（因为重复的东西很多），所以很多码农可能会和我一样，选择用excel去输入数据，然后再想办法转换成json格式。今天教大家使用js 将 excel 转为 json的方法。

1.新建html文件

<html lang="en"> 
<title> convert excel file to json </title>
<head>
 <script>
 </script>
</head>
<body>
</body>

我们可以使用<input>标签接收上传文件。代码如下：

 <input type="file" id="fileuploader" name="fileuploader" accept=".xls, .xlsx"/>

2.监听input change 事件

<script>
 $(document).ready(function(){
  $("#fileuploader").change(function(evt){
   // 上传文件处理逻辑...
  });
 });
</script>

3.读取上传文件

在这里，我们假设用户只上传一个文件。

var selectedfile = evt.target.files[0];

接下来，我们将使用filereader读取该文件数据。从这个filereader，我们可以读取excel文件中的数据作为二进制字符串。然后我们使用xlsx，它是sheetjs js-xlsx的内置工具，将我们的二进制字符串转换为json对象。引入 xlsx

<script lang =“javascript”src =“dist/xlsx.full.min.js”> </ script>

您可以下载源码xlsx.full.min.js

完整代码

<html lang="en"> 

<title> convert excel file to json </title>

<head>
 <script src="js/jquery.js"> </script>
 <script lang="javascript" src="js/xlsx.full.min.js"></script>
 <script>
  $(document).ready(function(){
   $("#fileuploader").change(function(evt){
     var selectedfile = evt.target.files[0];
     var reader = new filereader();
     reader.onload = function(event) {
      var data = event.target.result;
      var workbook = xlsx.read(data, {
       type: 'binary'
      });
      workbook.sheetnames.foreach(function(sheetname) {
       var xl_row_object = xlsx.utils.sheet_to_row_object_array(workbook.sheets[sheetname]);
       if (xl_row_object.length > 0) {
        document.getelementbyid("jsonobject").innerhtml = json.stringify(xl_row_object);
       }
       
      })
     };
     reader.onerror = function(event) {
     console.error("file could not be read! code " + event.target.error.code);
    };
    // 读取上传文件为二进制
    reader.readasbinarystring(selectedfile);
   });
  });
 </script>
</head>
<body>
 <input type="file" id="fileuploader" name="fileuploader" accept=".xls, .xlsx"/>
 </br></br>
 json : <label id="jsonobject"> </label>
</body>

作为示例，我们使用如下的excel表格。

利用JavaScript将Excel转换为JSON示例代码