使用纯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. webservice 注解介绍

    JAX-WS 注释 “基于 XML 的 Web Service 的 Java API”(JAX-WS)通过使用注释来指定与 Web Service 实现相关联的元数据以及简化 Web Service ...

  2. 一、hadoop安装与配置

    准备环境: 系统:centos6.5 64位 192.168.211.129   master 192.168.211.131   slave1   在两台服务器上都要配置ssh免密码登录 在192. ...

  3. Cookie的创建、读取、删除

    创建Cookie: HttpCookie cookie =  new HttpCookie(COOKIE_NAME_FOR_USER);cookie.Expires = DateTime.Now.Ad ...

  4. java常用API之DateFormat

    DateFormat 类: DateFormat 类是日期/时间格式化子类的抽象类,它以与语言无关的方式格式化并解析日期或时间.日期/时间格式化子类(如 SimpleDateFormat类)允许进行格 ...

  5. SQL:Example Uses of the SUBSTRING String Function

    ---Example Uses of the SUBSTRING String Function --http://www.sql-server-helper.com/tips/tip-of-the- ...

  6. python30题

    1.执行Python 脚本的两种方式 使用python解释器(python aa.py)或在unix系统下赋值成777,执行(./aa.py) 2.简述位.字节的关系 1个byte = 8bit,在A ...

  7. canvas的getImageData和putImageDataAPI

  8. MFCdll的两种调用方法

        有同事问我mfcdll的掉用方法,这里总结了一下.   1 lib库调用   只要VS能找到dll对应的lib和h文件,就可以开发和调试.包含lib和h文件有两个方法. 第一种方法设置路径是 ...

  9. iDempiere 视频教程下载

    Created by 蓝色布鲁斯,QQ32876341,blog http://www.cnblogs.com/zzyan/ iDempiere官方中文wiki主页 http://wiki.idemp ...

  10. 用nodejs做一个svn密码修改页面

    linux上配置好svn服务后,管理修改密码还得去手工修改passwd这个文件,略麻烦,其实网上应该有配套的web管理修改界面程序.但我想自己用nodejs写一个,因为用node不用配置复杂的服务器. ...