前面的文章中已经讲过关于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. vue.config.js的常用配置

    const path = require('path') const glob = require('glob') const resolve = (dir) => path.join(__di ...

  2. JSON2ABAPType：根据JSON数据结构生成ABAP类型定义

    一图表明本文将要介绍的工具: JSON是常见的数据格式,经常用于接口开发.ABAP开发者通常使用/ui2/cl_json来把JSON数据转换为相应的ABAP类型. 在转换前,必须要定义相应的ABAP类 ...

  3. Android 插件化开发（四）：插件化实现方案

    在经过上面铺垫后,我们可以尝试整体实现一下插件化了.这里我们先介绍一下最简单的实现插件化的方案. 一.最简单的插件化实现方案 最简单的插件化实现方案,对四大组件都是适用的,技术面涉及如下: 1). 合 ...

  4. iOS开发 - 超级签名实现之描述文件

    简介 因为最近企业签掉得太严重了,上头要求实现超级签进行游戏下载.故有了此文章,记录一下过程. 签名原理其实很简单,超级签名的技术就是使用个人开发者账号,将用户的设备当作开发设备进行应用分发.这也导致 ...

  5. iOS 13 presentViewController

    升级了iOS 13,发现代码中使用presentViewController的都变成了这样的,顶部留了一部分 查看present样式,iOS 13 默认自动适配,需要在present的时候,设置sty ...

  6. 【HNOI 2019】JOJO

    Problem Description JOJO 的奇幻冒险是一部非常火的漫画.漫画中的男主角经常喜欢连续喊很多的「欧拉」或者「木大」. 为了防止字太多挡住漫画内容,现在打算在新的漫画中用 \(x\) ...

  7. git clone 仓库的部分代码

    对于较大的代码仓库来说,如果只是想查看和学习其中部分源代码,选择性地下载部分路径中的代码就显得很实用了,这样可以节省大量等待时间. 比如像 Chromium 这种,仓库大小好几 G 的. clone ...

  8. 剑指offer笔记面试题8----二叉树的下一个节点

    题目:给定一棵二叉树和其中的一个节点,如何找出中序遍历序列的下一个节点?树中的节点除了有两个分别指向左.右子节点的指针,还有一个指向父节点的指针. 测试用例: 普通二叉树(完全二叉树,不完全二叉树). ...

  9. library: Vulnhub Walkthrough

    网络主机探测: 端口主机扫描: ╰─ nmap -p1-65535 -sV -A -O -sT 10.10.202.136 21/tcp open ftp vsftpd 3.0.380/tcp ope ...

  10. CentOS高可用集群LVS+Keepalived(DR模式)

    操作系统:CentOS6.5_x64 mini 负载均衡模式:DR(直接路由) LVS与Keepalived简述: LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是 ...