前面的文章中已经讲过关于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. echart的legend不显示问题

    legend的data与series的name 两者必须同时存在,且数量和文字内容必须一致.

  2. 更小的GIS数据格式-Geobuf

    背景 我们经常遇到直接传输gis数据到前端展示的时候,有时候数据量一稍微多点,传输速度就减慢,因为我们用于传输的json格式比较大. Geobuf介绍 Geobuf是一种用于地理数据的紧凑二进制编码. ...

  3. adb shell常用命令

    一.文件操作相关命令 1.文件操作命令 子命令 参数 说明 cd 无 进入目录 cat [-beflnstuv] [-B bsize] [file...] 查看文件内容-n:显示行号-b:显示行号,但 ...

  4. js基础总结04 --bom对象

    1.Bom 定义:浏览器对象模型,包含一系列与浏览器窗口交互的对象,如:Window,Location,History,Document,Screen 2.Window对象 定义:窗口对象,所有js中 ...

  5. CentOS7环境下安装docker

    操作系统 : CentOS7.5.1804_x64 docker版本: docker-ce-18.06.3 准备环境 1.如之前安装过移除老旧版本 yum remove docker docker-c ...

  6. 数据安全管理：RSA加密算法，签名验签流程详解

    本文源码:GitHub·点这里 || GitEE·点这里 一.RSA算法简介 1.加密解密 RSA加密是一种非对称加密,在公开密钥加密和电子商业中RSA被广泛使用.可以在不直接传递密钥的情况下,完成加 ...

  7. xms新版发布

    基于.net core 3.0.101 github地址: https://github.com/migomiddle/xms 码云地址: https://gitee.com/migomiddle/x ...

  8. ES-索引操作

    参考: https://es.xiaoleilu.com/030_Data/05_Document.html <ELasticsearch in Action> 以下的操作在ES7.5版本 ...

  9. mongo [initandlisten] exception in initAndListen: 98 Unable to create/open lock file: /data/db/mongod.lock errno:13 Permission denied Is a mongod instance already running?, terminating 2019-09-23T16:

    解决方法: 加权 sudo chmod -Rf 777 /data/db

  10. 【漏洞预警】Redis 4.x/5.x 远程命令执行高危漏洞

    2019年7月09日,阿里云应急响应中心监测到有安全研究人员披露Redis 4.x/5.x 远程命令执行高危漏洞利用代码工具.针对未授权或弱口令的Redis服务,攻击者通过构造特定请求,成功利用漏洞可 ...