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


Posted in Javascript onJune 14, 2019

前言

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示例代码

读出json数据如下

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

大功告成!!!

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

演示源码地址code

总结

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

Javascript 相关文章推荐
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
js获取域名的方法
Jan 27 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 #Javascript
Vue动态创建注册component的实例代码
Jun 14 #Javascript
基于Proxy的小程序状态管理实现
Jun 14 #Javascript
深度了解vue.js中hooks的相关知识
Jun 14 #Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 #Javascript
在Vue中使用icon 字体图标的方法
Jun 14 #Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 #Javascript
You might like
支付宝接口开发集成支付环境小结
2015/03/17 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
2014年后备干部工作总结
2014/12/08 职场文书
小学班主任工作随笔
2015/08/15 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
MySQL表字段时间设置默认值
2021/05/13 MySQL
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android