通常，一般读取Excel都是由后台来处理，不过如果需求要前台来处理，也是可以的。、

1.需要用到js-xlsx，下载地址：js-xlsx

2.demo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="./js/xlsx.full.min.js"></script>
    </head>
    <body>
        <input type="file"onchange="importf(this)" />
        <div id="demo"></div>
        <script>
            /*
            FileReader共有4种读取方法：
            1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
            2.readAsBinaryString(file)：将文件读取为二进制字符串
            3.readAsDataURL(file)：将文件读取为Data URL
            4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'
                         */
            var wb;//读取完成的数据
            var rABS = false; //是否将文件读取为二进制字符串

function importf(obj) {//导入
                if(!obj.files) {
                    return;
                }
                var f = obj.files[0];
                var reader = new FileReader();
                reader.onload = function(e) {
                    var data = e.target.result;
                    if(rABS) {
                        wb = XLSX.read(btoa(fixdata(data)), {//手动转化
                            type: 'base64'
                        });
                    } else {
                        wb = XLSX.read(data, {
                            type: 'binary'
                        });
                    }
                    //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
                    //wb.Sheets[Sheet名]获取第一个Sheet的数据
                   
document.getElementById("demo").innerHTML= JSON.stringify(
XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );
                };
                if(rABS) {
                    reader.readAsArrayBuffer(f);
                } else {
                    reader.readAsBinaryString(f);
                }
            }

function fixdata(data) { //文件流转BinaryString
                var o = "",
                    l = 0,
                    w = 10240;
               
for(; l < data.byteLength / w; ++l) o +=
String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w +
w)));
                o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
                return o;
            }
        </script>
    </body>
</html>

js 解析本地Excel文件！的更多相关文章

  1. JS 读取本地Excel文件

    首先我们先引用一个Excel的类库xlsx.full.min.js 中间处理: 'use strict'; var ExcelReader = { isFirstRead: true, fixdata ...

  2. Python3+Requests-HTML+Requests-File解析本地html文件

    一.说明 解析html文件我喜欢用xpath不喜欢用BeautifulSoup,Requests的作者出了Requests-HTML后一般都用Requests-HTML. 但是Requests-HTM ...

  3. JS客户端读取Excel文件插件js-xls使用方法

    js-xls是一款客户端读取Excel的插件,亲测IE11.FireFox.Chrome可用,读取速度也客观. 插件Demo地址:http://oss.sheetjs.com/js-xlsx/    ...

  4. Excelbatis-一个将excel文件读入成实体列表、将实体列表解析成excel文件的ORM框架，简洁易于配置、可扩展性好

    欢迎使用Excelbatis! github地址:https://github.com/log4leo/Excelbatis Excelbatis的优点 和spring天然结合,易于接入 xsd支持, ...

  5. js上传Excel文件

    一.问题 需要在项目里添加一个上传excel文件的功能,因为其他同样的后台里面有上传文件的功能,第一反应就是想着直接用.了解了一下发现它是利用bootstrap的fileinput实现的,但是我怎么都 ...

  6. Java解析导入Excel文件后台代码实现

    使用MultipartFile上传Excel文件后端代码实现:(springmvc下的spring-webmvc (MultipartFile )上传) 由于POST一个包含文件上传的Form会以mu ...

  7. python解析本地HTML文件

    Python使用爬虫技术时,每运行一次,本地都会访问一次主机.为避免完成程序前调试时多次访问主机增加主机负荷,我们可以在编写程序前将网页源代码存在本地,调试时访问本地文件即可.现在我来分享一下爬取资料 ...

  8. .NET 客户端上传本地excel文件到服务器上,并在客户端显示

    // 上传按钮 protected void btnUp_Click(object sender, EventArgs e) { bool b = Upload(fuExcel); // 上传exce ...

  9. 开发一个简单的chrome插件-解析本地markdown文件

    准备软件环境 1. 软件环境 首先,需要使用到的软件和工具环境如下: 一个最新的chrome浏览器 编辑器vscode 2. 使用的js库 代码高亮库:prismjs https://prismjs. ...

随机推荐

  1. XMemcached简单使用示例

    Memcached的Java客户端目前有三个: Memcached Client for Java 比 SpyMemcached更稳定.更早.更广泛: SpyMemcached 比 Memcached ...

  2. 算法模板——计算几何2（二维凸包——Andrew算法）

    实现功能:求出二维平面内一对散点的凸包(详见Codevs 1298) 很神奇的算法——先将各个点按坐标排序,然后像我们所知的那样一路左转,求出半边的凸包,然后反过来求另一半的凸包 我以前正是因为总抱着 ...

  3. 多个Activity交互的生命周期：

    一.多个Activity交互的生命周期: A Activity打开B Activity的时候:        A Activity                    B Activity     ...

  4. 快速上手UIBezierPath

    UIBezierPath主要用来绘制矢量图形,它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的(CGContextRef),所以一般U ...

  5. css重要属性之辩

    一.relative 1)与兄弟 relative对absolute 1.限制left/top/right/bottom定位 2.限制z-index层级: 3.限制在overflow下 relativ ...

  6. 带金属光泽的模型shader的实现

    最近捣鼓了一下金属光泽的shader的实现,在一些高模展示的时候或者模型的金属部分的表现的时候,我们需要给模型添加一些金属光泽,表现出一个模型某些金属装备上有一定的反光.今天我主要写一种基于贴图实现的 ...

  7. Cesium原理篇：3D Tiles（3）个人总结

    个人结论:目前,在演示层面,3D Tiles问题不大,但项目应用上就不够成熟了,所以问问自己,你是想吃瓜呢还是想吃螃蟹? 好的方面 数据规范 我非常喜欢glTF的整体设计,概括有四点:第一,数据块(B ...

  8. 樱花的季节，教大家用canvas画出飞舞的樱花树

    又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...

  9. 模块中为什么要加__name__ == "__main__"

    写一个hello模块 #!/usr/sbin/env python #-*- coding:utf- -*- print "我是hello模块,我被执行了" 在另一个python程 ...

  10. 在linux下使用百度ueditor编辑器上传图片

    百度ueditor编辑器虽然强大,但是也有不足的地方.如果对ueditor流程不是很熟悉可以说走的弯路比较多,费力不讨好.下面呢,就是要解决ueditor遇到的问题. 用ueditor上传图片遇到的问 ...