如何通过js去读取excel中的数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Excel数据获取</title>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

    <script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>

</head>

<body>

<input type="file" id="excel-file">

<textarea id="area"></textarea>

<script>

    //给input标签绑定change事件，一上传选中的.xls文件就会触发该函数

    $('#excel-file').change(function(e) {

        var files = e.target.files;

        var fileReader = new FileReader();

        fileReader.onload = function(ev) {

            try {

                var data = ev.target.result

                var workbook = XLSX.read(data, {

                    type: 'binary'

                }) // 以二进制流方式读取得到整份excel表格对象

                var persons = []; // 存储获取到的数据

            } catch (e) {

                console.log('文件类型不正确');

                return;

            }

            // 表格的表格范围，可用于判断表头是否数量是否正确

            var fromTo = '';

            // 遍历每张表读取

            for (var sheet in workbook.Sheets) {

                if (workbook.Sheets.hasOwnProperty(sheet)) {

                    fromTo = workbook.Sheets[sheet]['!ref'];

                    console.log(fromTo);

                    persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));

                    // break; // 如果只取第一张表，就取消注释这行

                }

            }

            //在控制台打印出来表格中的数据

            console.log(persons);

            $("#area").val(JSON.stringify(persons));

        };

        // 以二进制方式打开文件

        fileReader.readAsBinaryString(files[0]);

    });

</script>

</body>

</html>

如果需要在vue中使用，只需要将部分方法转化为vue中对应的方法即可，下一篇文章出一个vue中详细获取方法

实现js读取Excel数据的更多相关文章

  1. js读取excel数据后的时间格式转换

    使用xlsx.full.min.js 获取excel的日期数据为:37858: 拿到的整数值是日期距离1900年1月1日的天数,这时需要写一个函数转换: function formatDate(num ...

  2. java的poi技术读取Excel数据到MySQL

    这篇blog是介绍java中的poi技术读取Excel数据,然后保存到MySQL数据中. 你也可以在 : java的poi技术读取和导入Excel了解到写入Excel的方法信息 使用JXL技术可以在 ...

  3. .NET读取Excel数据，提示错误：未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序

    解决.NET读取Excel数据时,提示错误:未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序的操作: 1. 检查本机是否安装Office Access,如果未安装去去h ...

  4. oledbdataadapter 读取excel数据时，有的单元格内容不能读出

    表现:excel中某列中,有的单元格左上角有绿色箭头标志,有的没有,c#编写读取程序,但是只能读取出带绿色箭头的单元格中的内容,其余不带的读取不到内容 原因:excel中单元格因为是文本格式而存储了数 ...

  5. Openxml入门---Openxm读取Excel数据

    Openxml读取Excel数据: 有些问题,如果当Cell 里面是 日期和浮点型的话,对应的Cell.DataType==Null,对应的时间会转换为一个浮点型,对于这块可以通过DateTime.F ...

  6. js读取json数据（php传值给js）

    <?php $array =array('fds','fdsa','fdsafasd');  // json_encode($array); ?> <html> <hea ...

  7. C# 读取EXCEL数据

       /// <summary> /// 读取EXCEL数据 /// </summary> /// <param name="Path">< ...

  8. JAVA反射机制示例，读取excel数据映射到JAVA对象中

    import java.beans.PropertyDescriptor; import java.io.File; import java.io.FileInputStream; import ja ...

  9. Python读取Excel数据并根据列名取值

    一直想将自己接触到的东西梳理一遍,可就是迈不出第一步,希望从这篇总结开始不要再做行动的矮人了. 最近测试过程中需要用到python读取excel用例数据,于是去了解和学习了下xlrd库,这里只记录使用 ...

随机推荐

  1. 分布式链路追踪系统Sleuth和ZipKin

    1.微服务下的链路追踪讲解和重要性 简介:讲解什么是分布式链路追踪系统,及使用好处 进行日志埋点,各微服务追踪. 2.SpringCloud的链路追踪组件Sleuth 1.官方文档 http://cl ...

  2. Linux下MySQL主从复制(GTID)+读写分离(ProxySQL)-实施笔记

    GTID概念: GTID( Global Transaction Identifier)全局事务标识.GTID 是 5.6 版本引入的一个有关于主从复制的重大改进,相对于之前版本基于 Binlog 文 ...

  3. C# ArrayPool 源码解读之 byte[] 池化

    一:背景 1. 讲故事最近在分析一个 dump 的过程中发现其在 gen2 和 LOH 上有不少size较大的free,仔细看了下,这些free生前大多都是模板引擎生成的html片段的byte[]数组 ...

  4. 浅谈可持久化Trie与线段树的原理以及实现(带图)

    浅谈可持久化Trie与线段树的原理以及实现 引言 当我们需要保存一个数据结构不同时间的每个版本,最朴素的方法就是每个时间都创建一个独立的数据结构,单独储存. 但是这种方法不仅每次复制新的数据结构需要时 ...

  5. 学习Linux tar 命令：最简单也最困难

    摘要:在本文中,您将学习与tar 命令一起使用的最常用标志.如何创建和提取 tar 存档以及如何创建和提取 gzip 压缩的 tar 存档. 本文分享自华为云社区<Linux 中的 Tar 命令 ...

  6. 矩阵BFS

    leetcode 1091矩阵BFS 在一个 N × N 的方形网格中,每个单元格有两种状态:空(0)或者阻塞(1). 一条从左上角到右下角.长度为 k 的畅通路径,由满足下述条件的单元格 C_1, ...

  7. adb - Performing Push Install adb: error: failed to get feature set: more than one 解决方案

    问题背景 直接 adb install 包名  无法安装成功 解决方案 安装 adb -s 10.200.241.215:5555 install test.apk 删除 adb -s 10.200. ...

  8. Identity角色管理二（显示角色）

    需要将目前所有角色名显示出来,方法同用户管理 一.创建Index acction public async Task<ActionResult> Index() { var roles = ...

  9. VUE004. provide与inject的使用（祖先组件隔多层传静态值给子孙组件）

    provide和inject可以通过祖先组件隔三层四层甚至隔着九层妖塔传值给子孙组件. 需要注意的是这样的传值方式是非响应式的,需要结合自身的应用场景,比如将上传的限制条件通过父组件传值给子组件的子组 ...

  10. MySQL实战45讲（06--10）-笔记

    目录 06 | 全局锁和表锁 :给表加个字段怎么有这么多阻碍? 全局锁 表级锁 小结 07 | 行锁功过:怎么减少行锁对性能的影响? 死锁和死锁检测 08 | 事务到底是隔离的还是不隔离的? &quo ...