前面的文章中已经讲过关于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. 安卓JNI精细化讲解，让你彻底了解JNI（二）：用法解析

    目录 用法解析 ├── 1.JNI函数 │ ├── 1.1.extern "C" │ ├── 1.2.JNIEXPORT.JNICALL │ ├── 1.3.函数名 │ ├── 1 ...

  2. PMBOK 指南 第四章 项目整合管理（4.1-4.3）

    项目整合管理 包括对隶属于项目管理过程组的各个过程和项目管理活动进行识别.定义.组合.统一和协调的各个过程. 资源分配.平衡竞争性需求.研究各种备选方法.为实现项目目标而裁剪过程.管理各个项目管理知识 ...

  3. Visual Studio 2019使用码云设置过滤忽略的文件或文件夹(ignore file)

    Visual Studio 2019使用码云的时候,会遇到 “Git failed with a fatal error.error: open(".vs/{{项目名称}}/Server/s ...

  4. Android Healthd电池服务分析

    healthd healthd是安卓4.4之后提出来的,监听来自kernel的电池事件,并向上传递电池数据给framework层的BatteryService.BatteryService计算电池电量 ...

  5. 读书笔记之《Java 并发编程的艺术》

    一.多线程语义 即使是单核处理器也支持多线程执行代码,CPU 通过给每个线程分配 CPU 时间片来执行任务,当前任务执行一个时间片后会切换到下一个任务,所以 CPU 通过不停的切换线程执行. 并发执行 ...

  6. ReactNative: 使用对话框组件AlertIOS组件

    一.简介 在使用一款App的时候,经常会用到对话框进行信息的友好提示,一般简单要求性不高的时候我们可以使用web提供的alert实现即可.但是,对于需要交互性和美观性的对话框,alert就明显无法满足 ...

  7. 自学Java编程，如何混到一个7k薪资实习生的岗位

    现在Java软件开发的专业一直都是热门,有很多专业的学生,比如电子.机械.会计.土木等等专业由于专业本身没有更高的提升空间,所以现在的年轻人更加喜欢做一些科技前沿的工作,毕竟现在接触的都是电子产品.而 ...

  8. 流式计算（一）-Java8Stream

    大约各位看官君多少也听说了Storm/Spark/Flink,这些都是大数据流式处理框架.如果一条手机组装流水线上不同的人做不同的事,有的装电池,有的装屏幕,直到最后完成,这就是典型的流式处理.如果手 ...

  9. AES加密原理和AOE工程实践

    在AI业务的开发的过程中,我们常常需要对模型文件进行加密.我们从以下几个方面来说一说AES的加密原理以及AOE里的工程实践. 常见的加密算法 AOE对模型加密需求的思考 AES的加密原理 AOE工程实 ...

  10. 字符串模式匹配——KMP算法

    KMP算法匹配字符串 朴素匹配算法   字符串的模式匹配的方法刚开始是朴素匹配算法,也就是经常说的暴力匹配,说白了就是用子串去和父串一个一个匹配,从父串的第一个字符开始匹配,如果匹配到某一个失配了,就 ...