脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript将Excel转换为JSON

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

 更新时间：2019年06月14日 10:00:41   作者：alentan  
这篇文章主要给大家介绍了关于利用JavaScript将Excel转换为JSON的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

前言

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表格。

读出json数据如下

大功告成！！！

SheetJS 还有很多实用的功能，具体更多功能请自行去github查看githu地址

演示源码地址code

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • JavaScript实现word转png的示例代码

    JavaScript实现word转png的示例代码

    这篇文章主要为大家详细介绍了如何使用JavaScript实现word转png的功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02
  • 详解如何在微信小程序中愉快地使用sass

    详解如何在微信小程序中愉快地使用sass

    这篇文章主要介绍了详解如何在微信小程序中愉快地使用sass，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 如何在一个页面显示多个百度地图

    如何在一个页面显示多个百度地图

    经常有人问，百度地图JavaScript API能在同一页面显示多个地图吗？当然可以啊，为什么不可以呢？地图之于页面无非就是个div，我们可以在页面显示多个div，自然也可以显示多个地图。
    2013-04-04
  • JS/jQ实现免费获取手机验证码倒计时效果

    JS/jQ实现免费获取手机验证码倒计时效果

    这篇文章主要介绍了JS/jQ实现免费获取手机验证码倒计时效果的相关资料,通过定义两个接口，发送验证请求和返回数据验证手机号和验证是否一致，后台根据接口去实现，需要的朋友可以参考下
    2016-06-06
  • 纯css下拉菜单 无需js

    纯css下拉菜单 无需js

    这篇文章主要为大家详细介绍了纯css下拉菜单代码，无需js，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 微信小程序控制台提示warning:Now you can provide attr

    微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "w

    这篇文章主要介绍了微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法,简单分析了wx:for警告提示相关解决方法,需要的朋友可以参考下
    2019-02-02
  • Chrome调试折腾记之JS断点调试技巧

    Chrome调试折腾记之JS断点调试技巧

    这篇文章主要介绍了Chrome调试折腾记之JS断点调试技巧，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-09-09
  • JavaScript构造函数原理及实现流程解析

    JavaScript构造函数原理及实现流程解析

    这篇文章主要介绍了JavaScript构造函数原理及实现流程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • 微信小程序textarea层级过高(盖住其他元素)问题的解决办法

    微信小程序textarea层级过高(盖住其他元素)问题的解决办法

    这篇文章主要给大家介绍了关于微信小程序textarea层级过高(盖住其他元素)问题的解决办法，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-03-03
  • JavaScript表单验证完美代码

    JavaScript表单验证完美代码

    用原生JS写一个简单的表单验证功能，代码分为html部分和js部分，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
    2017-03-03

最新评论