使用纯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. Ubuntu 12.04 搭建 SAMBA-SWAT（Samba Web 管理工具）

    参考了:http://linux.chinaunix.net/techdoc/net/2007/03/14/952274.shtml,对其进行了部分修改完善. 依次执行 1.sudo apt-get ...

  2. 重入锁--ReentrantLock

    本部分主要参考<java并发编程艺术>一书相关内容,同时参考https://blog.csdn.net/zhilinboke/article/details/83104597,说的非常形象 ...

  3. 【转】使用Python的Requests库进行web接口测试

    原文地址:使用Python的Requests库进行web接口测试 1.Requests简介 Requests 是使用 Apache2 Licensed 许可证的 HTTP 库.用 Python 编写, ...

  4. 【Linux】Linux系统启动过程

    1.Linux系统的启动过程并不是大家想象中的那么复杂,其过程可以分为5个阶段: 内核的引导. 运行 init. 系统初始化. 建立终端 . 用户登录系统. 1.Linux系统的启动过程并不是大家想象 ...

  5. 【linux】dpkg 命令使用说明

    dpkg是一个debian包管理工具.能够对包进行安装.卸载.获取信息等操作.用法:    安装(解包并配置):       dpkg -i package_file       dpkg --ins ...

  6. [转]<加密算法c#>——— 3DES加密之ECB模式 和 CBC模式

    本文转自:http://www.cnblogs.com/qq278360339/archive/2013/06/05/3119222.html 最近 一个项目.net 要调用JAVA的WEB SERV ...

  7. Jquery系列：设置div、span等dom结点的内容，jquery中没有innerText、innerHtml

    发现如果我在div或者其他非表单的标签中赋值,原本用普通的js就直接document.getElementById("id").innerHtml(或者其他几个)就可以了. 但是在 ...

  8. 重构指南 - 使用多态代替条件判断(Replace conditional with Polymorphism)

    多态(polymorphism)是面向对象的重要特性,简单可理解为:一个接口,多种实现. 当你的代码中存在通过不同的类型执行不同的操作,包含大量if else或者switch语句时,就可以考虑进行重构 ...

  9. WinSock WSAEventSelect 模型

    在前面我们说了WSAAsyncSelect 模型,它相比于select模型来说提供了这样一种机制:当发生对应的IO通知时会立即通知操作系统,并调用对应的处理函数,它解决了调用send和 recv的时机 ...

  10. jquery hover(overListener, outListener) || bind('mouseover',methodA).bind('mouseout',methodB)

    1.区别: bind方式,进入外部区域和内部区域都会触发相关方法(methodA 或methodB): hover方式,进入内部区域不会再触发相关方法. 2.example: <body> ...