使用纯Javascript解析excel文件。

使用的是开源的解析excel的js库：sheetjs。github地址：https://github.com/SheetJS/js-xlsx

首先引用JS库

<script src="od.js"></script>

<script src="jszip.js"></script>

<script src="xlsx.js"></script>

放置页面组件

<body>

    <div id="drop">Drop an XLSX / XLSM / XLSB / ODS / XLS / XML file here to see sheet data</div>

    <p><input type="file" name="xlfile" id="xlf" /> ... or click here to select a file</p>

</body>

页面效果如下：

给dom元素添加监听

function addLis() {

    var xlf = document.getElementById('xlf');

    var drop = document.getElementById('drop');

    drop.addEventListener("dragenter", handleDragover, false);

    drop.addEventListener("dragover", handleDragover, false);

    drop.addEventListener("drop", onDropDown, false);

    if(xlf.addEventListener) xlf.addEventListener('change', handleFile, false);

}

addLis();

function handleDragover(e) {

    e.stopPropagation();

    e.preventDefault();

    e.dataTransfer.dropEffect = 'copy';

}

function onDropDown(e) {

    e.stopPropagation();

    e.preventDefault();

    var files = e.dataTransfer.files;

    var f = files[0];

    readFile(f);

}

function handleFile(e) {

    var files = e.target.files;

    var f = files[0];

    readFile(f);

}

读取文档并输出到控制台：

function readFile(file) {

    var name = file.name;

    var reader = new FileReader();

    reader.onload = function (e) {

        var data = e.target.result;

        var wb = XLSX.read(data, { type: "binary" });

        console.log(wb);

    };

    reader.readAsBinaryString(file);

}

输出示例：

js前端解析excel文件的更多相关文章

  1. AngularJS之前端解析excel文件

    之前发现一款比较强大的js解析excel插件SheetJS js-xlsx,一直未投入到生产中使用.最近有批量导入的需求,大致看了下文档,使用比较方便快捷,容易上手,现在以AngularJS为例,介绍 ...

  2. c++ 读取并解析excel文件方法

    用Cocos开发模型特效工具编辑器,跨Mac和windows,当中有个需求是读取并解析excel文件,但网上的查找的例子几乎都只能是在windows下面使用,再或者是命令行脚本之类的.于是,自己写了一 ...

  3. 解析Excel文件并把数据存入数据库

    前段时间做一个小项目,为了同时存储多条数据,其中有一个功能是解析Excel并把其中的数据存入对应数据库中.花了两天时间,不过一天多是因为用了"upload"关键字作为URL从而导致 ...

  4. Java通过jxl解析Excel文件入库，及日期格式处理方式 （附源代码）

    JAVA可以利用jxl简单快速的读取文件的内容,但是由于版本限制,只能读取97-03  xls格式的Excel. 本文是项目中用到的一个实例,先通过上传xls文件(包含日期),再通过jxl进行读取上传 ...

  5. nodejs 解析excel文件

    app.js: var FileUpload = require('express-fileupload') app.use(FileUpload()); service.js: npm instal ...

  6. Java：JXL解析Excel文件

    项目中,有需求要使用JXL解析Excel文件. 解析Excel文件 我们先要将文件转化为数据流inputStream. 当inputStream很大的时候 会造成Java虚拟器内存不够 抛出内存溢出 ...

  7. Jxl创建Excel文件和解析Excel文件

    import java.io.File; import jxl.Workbook; import jxl.write.Label; import jxl.write.WritableSheet; im ...

  8. vue下载和上传excle数据文件，解析excel文件数据并存在数据库中

    下载: VUE: window.open("xxxx/downloadOldTaskDataFile.do_", "_blank"); JAVA: /** * ...

  9. 【Java】使用Apache POI生成和解析Excel文件

    概述 Excel是我们平时工作中比较常用的用于存储二维表数据的,JAVA也可以直接对Excel进行操作,分别有jxl和poi,2种方式. HSSF is the POI Project's pure ...

随机推荐

  1. qs.parse()、qs.stringify()、JSON.parse()、JSON.stringify()使用方法

    一.JSON.parse(用于从一个字符串中解析出json 对象)ps:单引号写在{}外,每个属性都必须双引号,否则会抛出异常 let str = '[{"field":" ...

  2. PHP中break及continue两个流程控制指令解析

    <?php $arr = array( 'a' => '0a0', 'b' => '0b0', 'c' => '0c0', 'd' => '0d0', 'e' => ...

  3. 基础知识之 - C# Using的用法

    C#里面Using有两种用法: 1.作为指令. using+命名空间,导入其他命名空间中定义的类型,这样可以在程序中直接用命名空间中的类型,不必指定命名空间: 命名空间是.NET程序在逻辑上的组织结构 ...

  4. 树莓派3（Raspbain系统）安装.net环境

    因为公司之前做的网站项目都是基于微软的.net平台,现在需要在树莓派3上测试它是否能负载起正常的访问请求.最开始直接的想到微软3月份刚发布针对于树莓派3的win10系统,其实说是win10,也就是一个 ...

  5. 几个免费 IP 归属地查询 API

    1.淘宝:同个IP不能连续查询,需要时间间隔 http://ip.taobao.com/service/getIpInfo.php?ip=114.114.114.114 返回结果 { "co ...

  6. CF 305B——Continued Fractions——————【数学技巧】

    B. Continued Fractions time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  7. 【XShell】xshell 中“快速命令集”的使用

    突然看到朋友的xshell比我多一个按钮,且一点,哈哈哈 ,实现了很炫酷的功能,耐不住好奇,问了一句,原来是快速命令集! 1.选择快速命令集(两种方法a&b) a:文件 > 属性 > ...

  8. RocketMQ3.2.6安装部署及调用

    RocketMQ3.2.6安装部署及调用 1.RocketMQ部署架构 所有IP都是127.0.0.1,其中NameServer一个,Broker一个,Producer一个,Consumer一个 2. ...

  9. Linux进程优先级和nice值

    在学习了linux的完全公平调度算法(CFS)后,记录下学习轨迹 这篇文章主要讲述,完全公平调度算法的工作方式,和一些调度知识 我们可以通过ps -l看到当前正在运行的进程的详细信息其中 F:表示进程 ...

  10. mysql三：表操作

    一.存储引擎介绍 存储引擎即表类型,mysql根据不同的表类型会有不同的处理机制. 详见:点击查看 二.表的介绍 表相当于文件,表中的一条记录就相当于文件的一行内容,不同的是,表中的一条记录有对应的标 ...