利用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获得选中文本内容的方法
Dec 02 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
微信小程序实现分页加载效果
Nov 19 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用mysql数据库存储session的代码
2010/03/05 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
在Python的web框架中配置app的教程
2015/04/30 Python
Python numpy 点数组去重的实例
2018/04/18 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
班组长工作职责
2013/12/25 职场文书
企业管理培训感言
2014/01/27 职场文书
成语的广告词
2014/03/19 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS