利用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 相关文章推荐
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
Vue 事件处理操作实例详解
Mar 05 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
ant design 日期格式化的实现
Oct 27 Javascript
使用js获取身份证年龄的示例代码
Dec 11 Javascript
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
php项目中类的自动加载实例讲解
2019/09/12 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
vue组件之Alert的实现代码
2017/10/17 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python中自定义函数的教程
2015/04/27 Python
Python字符串详细介绍
2015/05/09 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
Python异常的检测和处理方法
2018/10/26 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
python区块及区块链的开发详解
2019/07/03 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
环保建议书400字
2014/05/14 职场文书
小区文明倡议书
2014/05/16 职场文书
企业授权委托书范本
2014/09/22 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
从事会计工作年限证明
2015/06/23 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers