js前端解析excel文件

时间：2021-07-14 09:56:48

使用纯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>

页面效果如下：

js前端解析excel文件

给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文件

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

  1. AngularJS之前端解析excel文件

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

  2. c&plus;&plus; 读取并解析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. 关于&period;net页面提交后css样式不生效的发现

    一直以来没有解决的问题,今天在老师的提示下终于得到解决. 问题:asp.net页面,提交后,或者举例最简单的例子通俗的说,当登陆页面,某一项输入错误,并且使用Response.Write(" ...

  2. POJ 1947Rebuilding Roads&lpar;树形DP &plus; 01背包&rpar;

    题目链接 题意:给出一个树形结构,求P个节点的子树最少要去掉几条边 分析:DP[root][j] 表示 以第 root 个为根节点, 包含j 个节点需要去掉几条边.那么对于 root 这个根节点来说, ...

  3. CODESOFT对话框中的显示字体怎么修改

      不同的人其使用软件的视觉习惯是不一样的,直接给大家介绍过如何设置CODESOFT的界面语言,这是一个大范围的界面显示设置.本文,将介绍如何修改CODESOFT对话框显示的字体,以满足自己的视觉习惯 ...

  4. css3选择器的比较（二） -- 包含字符串

    二.  包含“字符串” 两种用法的区别是: a. “~=”,需要用空格分割, b. "*=",不需要任何分隔符 1. 资料 a) b)  2. html代码 <div tit ...

  5. 2017-2-18 net 输入输出语句

    控制台程序的创建,输出,输入语句,定义变量,变量赋值,值覆盖,值拼接,值打印两种数据类型,整形类型转换 知识点: 1.输出语句 Console.WriteLine("");光标换行 ...

  6. buildah---github简单记录

    github里着重讲了buildah和podman的区别: buildah对标的是dockerfile的脚本化代替执行. podman对标的是docker命令的代替. gihub地址: https:/ ...

  7. 缓存dom查询

    为了提高性能缓存dom查询; 页面效果:

  8. L1 正则为什么会使参数偏向稀疏

    2018-12-09 22:18:43 假设费用函数 L 与某个参数 x 的关系如图所示: 则最优的 x 在绿点处,x 非零. 现在施加 L2 regularization,新的费用函数()如图中蓝线 ...

  9. RxJava响应式编程，入门的HelloWorld；

    RxJava核心就是异步,它也被称之为响应式编程:最大的优势就是随着程序逻辑变得越来越复杂,它依然能够保持简洁. Rxjava真的是让人又爱又恨,因为它的线程切换和链式调用真的很好用,但是入门却有点难 ...

  10. asp&period;net webform&sol;mvc导出Excel通用代码

    最近将自己在项目中经常用到的excel导出方法分析如下,如有不妥之处望他人指出,如果有更好的方法希望展示出来互相学习. //导出事件 protected void btnexcel_Click(obj ...

相关文章