插件下载地址: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. spring教程

    Spring框架是Java EE开发中最流行的框架,已经成为JEE事实上的标准,全世界的开发人员都在使用Spring框架开发各种应用.随着Spring boot,Spring cloud新版本的不断推 ...

  2. python爬取网页文本、图片

    从网页爬取文本信息: eg:从http://computer.swu.edu.cn/s/computer/kxyj2xsky/中爬取讲座信息(讲座时间和讲座名称) 注:如果要爬取的内容是多页的话,网址 ...

  3. hdu 2583 How far away ？ 离线算法 带权求最近距离

    How far away ? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  4. 2.2 学习总结 之 servlet 的两次抽取

    说在前面 昨天 完成了文件上出的学习和实践 今天 学习servlet的两次抽取,以加快编写工程的速度 一.servlet 抽取的原因: 刚刚学习使用servlet写后台,往往只使用一个servlet来 ...

  5. 1 - apicloud - str 字符串拼接技术

    <body> <label>Hello APP</label> <div id='sys-info'></div></body> ...

  6. java向量 vector

    Vector 向量 是java.util 包里的一个类,该类继承AbstractList,实现了类似动态数组的功能. 向量和数组相似,都可以保存一组数据,但数组的大小(长度)是固定的,而Vector ...

  7. Session简单介绍

    Session 会话 , Session是基于Cookie的一种会话机制. Cookie是服务器返回一小份数据给客户端,并且存放在客户端上. Session是,数据存放在服务器端. 常用API //得 ...

  8. 汉诺塔（思维、DP思想）

    链接:https://ac.nowcoder.com/acm/contest/3007/C来源:牛客网 题目描述 现在你有 N 块矩形木板,第 i 块木板的尺寸是 Xi*Yi,你想用这些木板来玩汉诺塔 ...

  9. Short Essay你真的会写了吗？

    提到short essay(可能其他essay也一样),很多同学都很头疼.“没有思路?不知从何下笔?没有亮点?”等等,这些都是同学们的致命伤,因此,short essay就成为了广大留学生的“送命题” ...

  10. idea新建java项目

    盘符下新建一个目录: 打开idea: Open -> 新建的目录: 右击目录 -> new -> module: 填写模块名 -> finish: file -> pro ...