插件下载地址: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. 第十九篇 同源策略与Jsonp

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...

  2. category添加属性

    category添加属性 面试题 Category的实现原理,以及Category为什么只能加方法不能加属性. Category中有load方法吗?load方法是什么时候调用的?load 方法能继承吗 ...

  3. Java算法练习——回文数

    题目链接 题目描述 判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1 输入: 121 输出: true 示例 2 输入: -121 输出: false ...

  4. 18 ~ express ~ 前台分类导航展示 与 排序

    一,前台分类导航展示 1,后台文件:  /router/main.js router.get('/',(req,res,next)=>{ /** * 从数据库中读取分类信息 * rs是一个数组类 ...

  5. my97datepicker实现日期改变立刻触发函数

    <input type="text" class="Wdate" onclick="WdatePicker({onpicking:functio ...

  6. java课程课后作业190502之单词统计

    自己想的方法一直都不是很好,但是又一直忘了改自己的算法,只能硬着头皮接着用自己以前的老方法了 第0步:输出某个英文文本文件中 26 字母出现的频率,由高到低排列,并显示字母出现的百分比,精确到小数点后 ...

  7. Python 日期时间datetime 加一天，减一天，加减一小时一分钟,加减一年

    计算年.月.日需要安装组件包 pip install python-dateutil 当前日期时间 import datetime print datetime.datetime.now() # 20 ...

  8. 转：JS高级学习笔记（8）- JavaScript执行上下文和执行栈

    必看参考: 请移步:博客园 JavaScript的执行上下文 深入理解JavaScript执行上下文和执行栈 JavaScript 深入之执行上下文 写在开头 入坑前端已经 13 个月了,不能再称自己 ...

  9. UVALive 5913 字典树

    先输入n个字符串的字典,每个字符串的前缀+后缀可以组成新的合法字符串,但肯定是有重复的,问从给定的字符串,生成的所有可能的字符串为多少个 把前缀和后缀压入字典树,达到前缀和后缀的去重,首先的总和即为前 ...

  10. 洛谷-P2634 [国家集训队]聪聪可可 点分治

    Description 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电脑)……遇到这种问题,一般情况下石头剪刀布就好 ...