前面的文章中已经讲过关于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. 敏捷之旅--携程行程&订单团队

    转自本人运营的公众号“ 携程技术中心PMO”(ID:cso_pmo)     关于我们   我们面临的挑战   敏捷开发是以用户的需求进化为核心,采用迭代.循序渐进的方法进行软件开发.先把一个大项目分 ...

  2. linux搭建TFTP服务

    1.安装tftp服务和客户端 sudo apt-get install xinetd tftp tftpd 2.配置 vim /etc/xinetd.d/tftp 内容如下: service tftp ...

  3. 2018 经典的CVPR 关于ImageCaptioning论文

    1.        SemStyle: Learning to Generate Stylised Image Captions using Unaligned Text(2018 CVPR) 主要研 ...

  4. .NET机器学习 ML.NET 1.4预览版和模型生成器更新

    ML.NET 是面向.NET开发人员的开源和跨平台机器学习框架. ML.NET  还包括Model Builder  (一个简单的UI工具)和  CLI  ,使用自动机器学习(AutoML)构建自定义 ...

  5. sqlalchemy 执行原生sql语句

    from contextlib import contextmanager from sqlalchemy import create_engine, ForeignKey from sqlalche ...

  6. weed3-2.2.细讲插入和更新

    Weed3 一个微型ORM框架(只有0.1Mb哦) 源码:https://github.com/noear/weed3 源码:https://gitee.com/noear/weed3 这篇重点讲讲插 ...

  7. LeetCode 二叉树的锯齿形层次遍历

    第103题 给定一个二叉树,返回其节点值的锯齿形层次遍历.(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行). 例如: 给定二叉树 [3,9,20,null,null,15,7] ...

  8. SpringMVC的工作流程?Mybatis和hibernate区别？

    SpringMVC的工作流程?1. 用户发送请求至前端控制器DispatcherServlet2. DispatcherServlet收到请求调用HandlerMapping处理器映射器.3. 处理器 ...

  9. [转]smtplib.SMTPDataError: (554, b'DT:SPM的异常

    本文转自:https://blog.csdn.net/mapeifan/article/details/82428493 python 发送邮件,出现如下异常 异常如下: smtplib.SMTPDa ...

  10. NuGet修改默认包保存的位置

    NuGet默认的全局包下载地址一般为:C:\Users\{username}\.nuget\packages 修改方法: <?xml version="1.0" encodi ...