js前端解析excel文件

使用纯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);
}

输出示例：

转载于:https://www.cnblogs.com/Leechg/p/6407721.html

js前端解析excel文件相关推荐

前端解析Excel文件js-xlsx与bootstrapTable
前端解析Excel文件js-xlsx与bootstrapTable 1.引入xlsx.js 2.上传Excel按钮 3.读取Excel文件 4.结果 1.引入xlsx.js <script sr ...
JavaScript纯前端解析Excel文件
最近在开发时候遇到了这样的一个需求:需要在前端通过解析Excel将Excel中的值进行回传填入.我想在实际的开发过程中,肯定大家也会遇到这样的需求,在这介绍一个比较不错的JS工具库:js-xlsx,及 ...
JS快速解析Excel文件
<html lang="en"> <head><meta charset="UTF-8"><title>Exce ...
java代码使用http请求解压zip包并解析xml_Javascript 是如何解析 Excel 文件的？
最近要做一个导入导出 Excel 的功能,上一次做这个功能的时候,还是用的 Java Apache POI,这是一个用 Java 编写的免费开源的跨平台的 Java API,能够对 Microsoft ...
前端实现excel文件的导入导出
前端实现excel文件的导入导出导入文件导出文件导入文件 html: <el-dropdown v-waves @command="handleBatchCommand" ...
读取ppt并存入数据库_Java解析Excel文件并把数据存入数据库
前段时间做一个小项目,为了同时存储多条数据,其中有一个功能是解析Excel并把其中的数据存入对应数据库中.花了两天时间,不过一天多是因为用了"upload"关键字作为URL从而导致 ...
微信小程序使用node-xlsx解析excel文件的云函数
1.右键新建node.js云函数 2.在该云函数右键:在外部终端窗口打开 3.输入npm install node-xlsx,回车 4.引入并写程序,如下 // 云函数入口文件 const cloud ...
java解析excel报错,poi解析excel文件报错
getFileMagic() only operates on streams which support mark(int) 使用 bis 解决 BufferedInputStream bis = ...
java解析Excel文件的方法
java解析Excel文件的方法介绍 1.1 pom依赖 1.2 将数据流转化为可解析的Workbook类型文件 1.3 解析 1.4 Controller层接收前端传递的Excel文件(前端使用E ...

js前端解析excel文件

js前端解析excel文件相关推荐

最新文章

热门文章