雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码

JavaScript读取.xlsx文件为json

2020-08-26 分类:前端之旅 / 后端之路 阅读(248) 评论(0)

代码备份 js 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function(){
    $("#fileUploader").change(function(evt){
      var selectedFile = evt.target.files[0];
      var reader = new FileReader();
      // 读取上传文件为二进制
      reader.readAsBinaryString(selectedFile);
      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) {
            console.log(XL_row_object)
          }
        })
      };
      reader.onerror = function(event) {
        console.error("File could not be read! Code " + event.target.error.code);
      };
    });
  });

html 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcdn.net/ajax/libs/xlsx/0.16.6/xlsx.full.min.js"></script>
</head>
<body>
<div class="body">
  <input type="file" id="fileUploader" name="fileUploader" accept=".xls, .xlsx"/>
</div>
</body>
</html>

示例:

iShot2020-08-2616.08.59

File 文件

id name age card
1 天明1 12 1111
2 天明2 13 1112
3 天明3 14 1113
4 天明4 15 1114
5 天明5 16 1115
6 天明6 17 1116
7 天明7 18 1117
8 天明8 19 1118
9 天明9 20 1119
分享到:更多 ()

相关推荐

  • krpano 新插件 Light Postprocessing 后期调色简单使用
  • 安卓手机快速开启USB远程调试手机/微信网页
  • 微信小程序添加全景的几个方法
  • liunx 下安装pdftk / npm pdf-merge 依赖安装
  • 王者荣耀隐藏字符生成器-重名生成器及原理分析
  • 教你怎么在微信公众号文章插入720全景图片
  • 网页使用js屏蔽鼠标右键及一些快捷按键
  • 在 liunx 上安装中文字体 – 小微名片夹名片截图服务

评论 抢沙发

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • vcard - 二维码名片的格式及扫码导入-雅荷心语博客vcard – 二维码名片的格式及扫码导入2016-05-05评论(2)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
2021年一月
一 二 三 四 五 六 日
« 十一    
 123
45678910
11121314151617
18192021222324
25262728293031

最新评论

  • 前端小武 4年前 (2017-04-06)说:
    我看到了layer
  • 丁艳平 4年前 (2017-03-03)说:
  • Dawn 4年前 (2016-09-16)说:
    call_user_func_array最后的例子是错哦,你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 5年前 (2016-06-21)说:
    tp框架设置了全局捕获异常的,这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 5年前 (2016-05-17)说:
    构造函数里的判断 用异常机制可能更好一些

左邻右舍

  • Brian's Blog
  • 易水寒
  • 楼教主
  • 贤心
  • 阿米龙

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2021 雅荷心语博客   网站地图

emlogdux_heademlogdux_footer