前面的文章中已经讲过关于js表格的导出，此文章主要说到的是excel文件如何导入到网页中，并在网页端显示。

代码部分:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>js导入excel</title>

</head>

<body>

<input type="file"onchange="importf(this)" />

<p id="excelContent"></p>

<script src="xlsx.full.min.js"></script>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

<script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>

<script>

    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的数据

             */

            var excelJson = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);

            document.getElementById("excelContent").innerHTML= JSON.stringify( excelJson );

        };

        if(rABS) {

            reader.readAsArrayBuffer(f);

        } else {

            reader.readAsBinaryString(f);

        }

    }

    //文件流转BinaryString

    function fixdata(data) {

        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表格,代码如下 <!DOCTYPE html> <html> <head lang="en&qu ...

  2. 不到30行JS代码实现的Excel表格

    不到30行JS代码实现的Excel表格,jQuery并非不可替代 某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性: 由不足30行的原生JavaScript代码实现 ...

  3. js实现一键导出Excel

    演示地址:https://xibushijie.github.io/static/ExportToExcel.html <!DOCTYPE html> <html lang=&quo ...

  4. JS导出、导入EXCEL(案例)

    插件下载地址:http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js 1.导出excel <!DOCTYPE html> <html> ...

  5. Vue3实现动态导入Excel表格数据

    1.  前言 在开发工作过程中,我们会遇到各种各样的表格数据导入,大部分我们的解决方案:提供一个模板前端进行下载,然后按照这个模板要求进行数据填充,最后上传导入,这是其中一种解决方案.个人认为还有另外 ...

  6. php导入excel表格

    我们做网站的时候经常要用到excel导入和导出的功能,我们通常的做法是用phpexcel工具包来完成,具体方法如下: html代码: <form action="{:U('Mall/u ...

  7. phpexcel导入excel表格

    html代码 <form action="{:U('Mall/updExcel')}" method="POST" enctype="multi ...

  8. 在java中实现数据导入excel表格中

    1.首先前端代码如下: 一个导出按钮:<input id="export" class="btn btn-primary" type="butt ...

  9. 怎样把Word文档导入Excel表格

    Word是现在办公中的基础文件格式了,很多的内容我们都通过Word来进行编辑,那么当我们需要将Word文档里的信息导入到Excel里面的时候,我们应该怎样做呢?下面我们就一起来看一下吧. 操作步骤: ...

随机推荐

  1. SpringCloud-服务注册与实现-Eureka创建服务提供者(附源码下载)

    场景 SpringCloud-服务注册与实现-Eureka创建服务注册中心(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...

  2. IOS弓箭传说的插件开发

    1.导出ipa进行解压后,定位到执行程序archero,ida加载后,发现很多都是sub_xxx开头的. 2.搜索资料后,原来Unity编写的程序,可以使用Il2CppDumper进行符号表还原. 下 ...

  3. nfs 所有的版本的 RFC 整理; nfs 所有版本对比；

    下面是针对 nfs 所有的版本,我们可以通过不同的RFC 进行详细看其RFC的细节来进行对比: 下面是备忘一些NFS RFC 的链接: https://datatracker.ietf.org/doc ...

  4. weblogic的linux静默搭建

    前言: Weblogic与Tomcat都是java应用的容器,而这两者有什么大的不同呢?Tomcat是Apache基金会提供的Servlet容器,它支持JSP, Servlet和JDBC等J2EE关键 ...

  5. Maven发布封装到中央仓库时候报错：no default secret key: No secret key

    今天因为发布swagger-spring-boot-starter做一个问题的修复,然后碰到了下面这个问题,记录一下解决过程,帮助后续碰到类似问题的童鞋: *gpg: WARNING: "- ...

  6. RabbitMQ异常注意 reply-code=404, reply-text=NOT_FOUND - no exchange 'topic' in vhost '/', class-id=50, method-id=

    第一次,一定要先启动Provider再启动Consumer!!! rabbitmq为初始状态没有队列信息,然后我又没有启动consumer,所以导致provider找不到queue和exchange. ...

  7. C lang:Pointer and Array

    Xx_Introduction Point and Array germane. Xx_Code #include<stdio.h> #define SIZE 4 int main(voi ...

  8. Dynamics CRM通过定制应用程序功能区为符合条件的实体表单增加按钮

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复167或者20151029可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 前面的博文都是为一个实体添加按钮 ...

  9. 速查 NSArray NSSet NSHashTable 快速遍历之速度比较

    因为NSArray中的指针并不是简单的连续存放的,所以简单的测试了Cocoa的三种集合的快速遍历(NSFastEnumeration)性能,给出简单的参考. 添加元素: [collection add ...

  10. Process finished with exit code 139 (interrupted by signal 11: SIGSEGV)

    使用Qt写了个窗口,运行报错,无法正常运行python程序,获得的报错信息如下: Process finished with exit code 139 (interrupted by signal ...