使用纯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. 单一指责原则（Single Responsibility Principle） SRP

    using System; using System.Collections.Generic; using System.Text; namespace SingleResponsibilityPri ...

  2. Lua初探

      官方网站:http://www.lua.org/ 三方模块:https://luarocks.org/ 介绍安装luarocks语法注释标示符关键字全局变量数据类型变量赋值索引循环流程控制函数可变 ...

  3. (转)增加定时检测linux占用内存，及时清理功能

    增加定时检测linux占用内存,及时清理功能 原文:http://www.voidcn.com/article/p-wnmannom-boa.html free -m 查看,发现内存跑满了. 再 to ...

  4. java连接redis使用jedis带密码

    一.引入jedis的Maven配置文件 <!-- redis连接客户端jedis --> <dependency> <groupId>redis.clients&l ...

  5. 基于 CentOS 搭建 WordPress 个人博客

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 腾讯云提供了开发者实验室帮助用户搭建 WordPress 个人博客,教程内容如下,用户可以点击开发者实验室快速上机完成实验. 准备 LNMP ...

  6. js 获取 Url.Action 设置area

    var url = '@Url.Action("UserEdit","User",new { Area = "Setup", id = 1} ...

  7. 使用mermain用Markdown的语法画流程图和UML图

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:使用mermain用Markdown的语法画流程图和UML图.

  8. java版两人聊天程序

    server.java import java.io.*; import java.net.*; import java.text.SimpleDateFormat; import java.util ...

  9. Java基础入门 - 简介

    官网:https://www.oracle.com Java分为三个体系: JavaEE: Java Platform, Enterprise Edition, Java平台企业版 JavaSE: J ...

  10. js系列之js简介

    该系列教程都来源于:廖雪峰老师的博客 JavaScript是世界上最流行的脚本语言,因为你在电脑.手机.平板上浏览的所有的网页,以及无数基于HTML5的手机App,交互逻辑都是由JavaScript驱 ...