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

前言

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

总结

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

赞 (0)

相关推荐

  • 原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(uri, data, cb) { $.ajax({ url: uri, type: 'POST', dataType: 'json', data: data, }) .done(cb) .fail(function() { console.log("error"); }) .always(f

  • javascript将json格式数组下载为excel表格的方法

    实例如下: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript" src="jquery183.min.js"></script> <script type="text/javasc

  • Node.js实现Excel转JSON

    Node.js实现Excel转JSON

    一直在做一个关于网上选课的系统,选用了时下比较流行的node.js.今天在想怎么把学生或者老师的信息导入进去,涉及数量比较多一点,我手边又正好有一部分excel的表格.就想把excel转成json然后倒入到mongodb中去. 搜了下网上的资料,有不少.大部分都是C#或python的,要吗自己编译,要吗各种缺库运行不了.google了一下发现居然node里面是有这个module的.网址是https://www.npmjs.com/package/xls-to-json.. 步骤的话大概记录下吧:

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

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

    前言 JSON是码农们常用的数据格式,轻且方便,而直接手敲JSON却是比较麻烦和令人心情崩溃的(因为重复的东西很多),所以很多码农可能会和我一样,选择用Excel去输入数据,然后再想办法转换成JSON格式.今天教大家使用JS 将 Excel 转为 JSON的方法. 1.新建HTML文件 <html lang="en"> <title> Convert Excel File To JSON </title> <head> <scrip

  • Java利用Easyexcel导出excel表格的示例代码

    目录 1.导入 EasyExcel Maven包 2.配置 3.输出Excel到前端 1.导入 EasyExcel Maven包 <!--easyexcel 导出excel依赖--> <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>2.2.7</version> </depend

  • 利用JavaScript实现栈的数据结构示例代码

    前言 本文主要给大家介绍的是关于JavaScript实现栈的数据结构的相关内容,分享出来供大家参考学习,话不多少,来一起看看详细的介绍: 堆栈(英语:stack),也可直接称栈,在计算机科学中,是一种特殊的串列形式的数据结构,它的特殊之处在于只能允许在链接串列或阵列的一端(称为堆叠顶端指标,英语:top)进行加入数据(push)和输出数据(pop)的运算.另外栈也可以用一维数组或连结串列的形式来完成. 由于堆叠数据结构只允许在一端进行操作,因而按照后进先出(LIFO, Last In First

  • JavaScript将相对地址转换为绝对地址示例代码

    在看LABjs源代码时,发现里面有个将相对地址转为绝对地址的函数,将其拿出纪录如下: 复制代码 代码如下: function canonical_uri(src, base_path) { var root_page = /^[^?#]*\//.exec(location.href)[0], root_domain = /^\w+\:\/\/\/?[^\/]+/.exec(root_page)[0], absolute_regex = /^\w+\:\/\//; // is `src` is p

  • Java中利用Alibaba开源技术EasyExcel来操作Excel表的示例代码

    Java中利用Alibaba开源技术EasyExcel来操作Excel表的示例代码

    一.读Excel 1.Excel表格示例 2.对象示例 @Data public class DemoData { private String string; private Date date; private Double doubleData; } 3.监听器(重点部分) // 有个很重要的点 DemoDataListener 不能被spring管理,要每次读取excel都要new,然后里面用到spring可以构造方法传进去 public class DemoDataListener e

  • Python实现将Excel转换为json的方法示例

    Python实现将Excel转换为json的方法示例

    本文实例讲述了Python实现将Excel转换为json的方法.分享给大家供大家参考,具体如下: #-*- encoding:utf-8 -*- import sys import locale import os.path import os import time import shutil import datetime import types import sqlite3 import pypyodbc import traceback import json import codec

  • 原生JavaScript实现弹幕组件的示例代码

    前言 如今几乎所有的视频网站都有弹幕功能,那么今天我们就自己用原生 JavaScript 封装一个弹幕类.这个类希望有如下属性和实例方法: 属性 el容器节点的选择器,容器节点应为绝对定位,设置好宽高 height 每条弹幕的高度 mode 弹幕模式,half则为一半容器高度,top为三分之一,full为占满 speed弹幕划过屏幕的时间 gapWidth后一条弹幕与前一条弹幕的距离 方法 pushData 添加弹幕元数据 addData持续加入弹幕 start开始调度弹幕 stop停止弹幕 r

  • 利用Springboot实现Jwt认证的示例代码

    利用Springboot实现Jwt认证的示例代码

    JSON Web Token是目前最流行的跨域认证解决方案,,适合前后端分离项目通过Restful API进行数据交互时进行身份认证 关于Shiro整合JWT,可以看这里:Springboot实现Shiro+JWT认证 概述 由于概念性内容网上多的是,所以就不详细介绍了 具体可以看这里:阮一峰大佬的博客 我总结几个重点: JWT,全称Json Web Token,是一种令牌认证的方式 长相: 头部:放有签名算法和令牌类型(这个就是JWT) 载荷:你在令牌上附带的信息:比如用户的id,用户的电话号

  • JavaScript中removeChild 方法开发示例代码

    1. 概述 删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置. 当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新 // 拿到待删除节点: var self = document.getElementById('to-be-removed'); // 拿到父节点: var parent = self.parentElement; // 删除: var removed = parent.remove

  • Java利用Redis实现消息队列的示例代码

    本文介绍了Java利用Redis实现消息队列的示例代码,分享给大家,具体如下: 应用场景 为什么要用redis? 二进制存储.java序列化传输.IO连接数高.连接频繁 一.序列化 这里编写了一个java序列化的工具,主要是将对象转化为byte数组,和根据byte数组反序列化成java对象; 主要是用到了ByteArrayOutputStream和ByteArrayInputStream; 注意:每个需要序列化的对象都要实现Serializable接口; 其代码如下: package Utils

随机推荐