插件下载地址:http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js

1、导出excel

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>js导出excel</title>

</head>

<body>

    <button onclick="downloadExl(jsono)">导出</button>

    <a href="" download="我是导出来的测试文件.xlsx" id="downloadA"></a>

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

    <script>

        var jsono = [{

                         "姓名": "张三",

                         "年龄": "30",

                         "性别": "男"

                     },{

                         "姓名": "李四",

                         "年龄": "40",

                         "性别": "女"

                     },{

                         "姓名": "王五",

                         "年龄": "50",

                         "性别": "男"

                     }];

        var tmpDown; //导出的二进制对象

        function downloadExl(json, type) {

            //根据json数据，获取excel的第一行(例如:姓名、年龄、性别)存至map

            var tmpdata = json[0];

            json.unshift({});

            var keyMap = []; //获取keys

            for (var k in tmpdata) {

                keyMap.push(k);

                json[0][k] = k;

            }

              var tmpdata = [];

            json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {

                v: v[k],

                position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)

            }))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {

                v: v.v

            });

              //设置区域,比如表格从A1到D10

            var outputPos = Object.keys(tmpdata);

            var tmpWB = {

                SheetNames: ['mySheet'], //保存的表标题

                Sheets: {

                    'mySheet': Object.assign({},

                        tmpdata, //内容

                        {

                            '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域

                        })

                }

            };

              //创建二进制对象写入转换好的字节流

            tmpDown = new Blob([s2ab(XLSX.write(tmpWB,

                {bookType: (type == undefined ? 'xlsx':type),bookSST: false, type: 'binary'}//这里的数据是用来定义导出的格式类型

                ))], {

                type: ""

            });

            var href = URL.createObjectURL(tmpDown); //创建对象超链接

            document.getElementById("downloadA").href = href; //绑定a标签

            document.getElementById("downloadA").click(); //模拟点击实现下载

            setTimeout(function() { //延时释放

                URL.revokeObjectURL(tmpDown); //用URL.revokeObjectURL()来释放这个object URL

            }, 100);

        }

          //字符串转字符流

        function s2ab(s) {

            var buf = new ArrayBuffer(s.length);

            var view = new Uint8Array(buf);

            for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;

            return buf;

        }

        //将指定的自然数转换为26进制表示。映射关系：[0-25] -> [A-Z]。

        function getCharCol(n) {

            let temCol = '',

            s = '',

            m = 0

            while (n > 0) {

                m = n % 26 + 1

                s = String.fromCharCode(m + 64) + s

                n = (n - m) / 26

            }

            return s

        }

    </script>

</body>

</html>

2、导出结果

​

3、导入excel

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>js导入excel</title>

</head>

<body>

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

    <div id="excelContent"></div>

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

    <script>

        /**

         * FileReader共有4种读取方法：

         * 1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。

         * 2.readAsBinaryString(file)：将文件读取为二进制字符串

         * 3.readAsDataURL(file)：将文件读取为Data URL

         * 4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'

         */

        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>

4、导入结果

​

JS导出、导入EXCEL(案例)的更多相关文章

  1. .Net MVC 导入导出Excel总结(三种导出Excel方法，一种导入Excel方法) 通过MVC控制器导出导入Excel文件(可用于java SSH架构)

    .Net MVC  导入导出Excel总结(三种导出Excel方法,一种导入Excel方法) [原文地址] 通过MVC控制器导出导入Excel文件(可用于java SSH架构)   public cl ...

  2. DevExpress XtraGrid 数据导出导入Excel

    // <summary> /// 导出按钮 /// </summary> /// <param name="sender"></param ...

  3. C# winform 导出导入Excel/Doc 完整实例教程[网上看到的]

    还真没做过winform的导出导入,今天上网百度了一下.结果--- 所以还是我自己写个吧.之前做过web的,半搬半做就OK. 1添加引用:Aspose.Cells.dll(我们就叫工具包吧,可以从网上 ...

  4. asp.net core导出导入excel

    使用NPOI导入导出excel,已经封装好Action可以直接调用 导出 效果图 使用方法 定义导出实体 class Student { public int Id { get; set; } pub ...

  5. 用PHPExcel导出导入Excel

    thinkPHP5.0框架 查询数据库调用Excel方法 public function exportlist(){ $orderModel = new OrderModel(); if($start ...

  6. asp.net Mvc Npoi 导出导入 excel

    因近期项目遇到所以记录一下: 首先导出Excel : 首先引用NPOI包 http://pan.baidu.com/s/1i3Fosux (Action一定要用FileResult) /// < ...

  7. php利用PHPExcel类导出导入Excel用法

    PHPExcel类是php一个excel表格处理插件了,下面我来给大家介绍利用PHPExcel类来导入与导出excel表格的应用方法,有需要了解的朋友不防参考参考(PHPExcel自己百度下载这里不介 ...

  8. js导出成excel

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. C# WinForm 导出导入Excel/Doc 完整实例教程[使用Aspose.Cells.dll]

    [csharp] view plain copy 1.添加引用: Aspose.Cells.dll(我们就叫工具包吧,可以从网上下载.关于它的操作我在“Aspose.Cells操作说明 中文版 下载 ...

随机推荐

  1. Web基础之Servlet

    Servlet Servlet : server applet,直译服务小程序.那Servlet到底是什么呢? Servlet说白了其实就是一个接口,接口的作用是什么?规范呗,这个接口规定了下面三个问 ...

  2. 基础语法-循环结构for

    基础语法-循环结构for 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.for循环格式 for(初始化表达式;循环条件表达式;循环后的操作表达式){ 执行语句(循环体); } ...

  3. 2019-9-16 java上课知识整理总结（动手动脑，课后实验）

    java上课知识整理总结(动手动脑,课后实验) 一,课堂测试 1,题目:课堂测试:像二柱子那样,花二十分钟写一个能自动生成30道小学四则运算题目的 “软件” 要求:(1)题目避免重复: (2)可定制( ...

  4. cf 760B.Frodo and pillows

    二分,判断条件就是最小情况(设当前k位取x)比剩余值(m-x)要小.(貌似又做麻烦了2333) #include<bits/stdc++.h> #define LL long long # ...

  5. EXCEL排序（hdu 1862）

    其实这个题吧,就是发出来玩玩,会用sort就很easy了,有一个小小的知识点:比较字符串字典序的大小用strcmp函数. strcmp(a,b)<0说明a的字典序小于b的字典序. 上题: Inp ...

  6. org.springframework.test.context.junit4.SpringJUnit4ClassRunner

    项目中有了spring-test的依赖,里面确实也有 org.springframework.test.context.junit4.SpringJUnit4ClassRunner 此类,但是项目就是 ...

  7. HTTP协议（一）：概述

    背景介绍 但凡世界上牛逼的人物,都会有一个非常离奇的经历.比如说乞丐出身的皇帝朱元璋,出生时家中红光大作,映红了半边天;再比如说无良皇帝刘邦,简直不要太牛逼,说自己是老妈和一条白龙交合生出的自己,而老 ...

  8. dmidecode 硬件

    dmidecode -t Memory   #查内存 Maximum Capacity: 4 GB  #最大4G         Number Of Devices: 2   #2个插槽 服务器到底能 ...

  9. Spring框架-IOC和AOP

    IOC:它并不是一种技术实现,而是一种设计思想.在任何一个有实际开发意义的程序项目中,我们会使用很多类来描述它们特有的功能,并且通过类与类之间的相互协作来完成特定的业务逻辑.这个时候,每个类都需要负责 ...

  10. Python自学之路---Day01

    目录 Python自学之路---Day01 注释 单行注释 多行注释 print()函数 语法 参数 实例 input()函数 语法 参数 实例 查看Python的关键字 代码 变量与常量 变量 如何 ...