利用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 相关文章推荐
js同比例缩放图片的小例子
Oct 30 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
js实现select跳转功能代码
Oct 22 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
JS闭包用法实例分析
Mar 27 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
django 修改server端口号的方法
2018/05/14 Python
Python中一般处理中文的几种方法
2019/03/06 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
python跨文件使用全局变量的实现
2020/11/17 Python
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
安全承诺书格式
2014/05/21 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js