插件下载地址: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. 修改电脑IP地址和MAC地址

    一.修改IP地址: 电脑右下角:上网的图标,点击右键,打开“网络和共享中心”, 点击“本地连接”,打开的窗口点击“属性”, 打开新窗口,找到“IPv4”,点击“属性”, 打开新窗口,修改ip,保存,关 ...

  2. 区间DP----模板

    简介 区间dp,顾名思义就是在一段区间上进行动态规划.对于每段区间,他们的最优值都是由几段更小区间的最优值得到,是分治思想的一种应用,将一个区间问题不断划分为更小的区间直至一个元素组成的区间,枚举他们 ...

  3. 将已有微信小程序转换为多端应用

    文档地址 https://nervjs.github.io/taro/

  4. 每天一点点之laravel框架开发 - Laravel5.6去除URL中的index.php

    在项目routes/web.php文件中添加了自定义的路由后,访问localhost/index.php/aaa,可以正常访问,但是去掉index.php后,提示404 Not Found 1. 按照 ...

  5. Sql server 表表达式

    1.表表达式概述 (1)表表达式(table expression) 是一个命名的查询表达式.代表一个有效的关系表 (2)在DML 中,使用表表达式和使用其他表非常类似 (3)sqlserver 支持 ...

  6. org.apache.jasper.JasperException: /WEB-INFO/jsp/product/edit.jsp(168,45)

    PWC6038:"${empty data.code?'001':fn:substring(data.code,0,8)}" contains invalid expression ...

  7. 动手动脑 4 String 类

    动手动脑1: 请运行以下示例代码StringPool.java,查看其输出结果.如何解释这样的输出结果?从中你能总结出什么?       在Java中,内容相同的字串常量(“Hello”)只保存一份以 ...

  8. a.e. almost everywhere i.e. 是拉丁语id est的缩写

    a.e.     :   almost everywhere i.e.是拉丁语id est的缩写,意为“也就是说,与英文that is的意思一样

  9. （day 1）创建项目--1

    1.利用cmd(命令行)创建项目myblog 确定好项目要放在哪个directory. dir一下创建好的项目看下有什么 django自带有一个小型的服务器可通过  runserver 启动它 可取浏 ...

  10. Nginx复习

    Nginx基本概念 是什么,做什么事情 高性能的HTTP和反向代理web服务器,特点占有内存小,并发能力强, Nginx专为性能优化而开发,最高支持50000个并发连接数 反向代理 正向代理  在客户 ...