利用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 append() html时的小问题的解决方法
Dec 16 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
详解jquery和vue对比
Apr 16 jQuery
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
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
kfc实习自我鉴定
2013/12/14 职场文书
英语教师自荐信
2014/05/26 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
千与千寻观后感
2015/06/04 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
Nginx缓存设置案例详解
2021/09/15 Servers