插件下载地址: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. vue学习（十一）vue-cli3开发单文件组件

    一 单文件组件介绍 二 如何安装Vue-Cli3脚手架 三 快速原型开发 四 vue-cli3生成项目 五 购物车项目搭建 六 购物车项目操作 七 Mock模拟数据 八 Vue中使用第三方组件(ele ...

  2. P 1020 月饼

    转跳点:

  3. 创建简单web项目

    Intellij Idea直接安装(可根据需要选择自己设置的安装目录),jdk使用1.6/1.7/1.8都可以,主要是配置好系统环境变量,tomcat7上tomcat的官网下载压缩包解压即可. 一.创 ...

  4. Day3-T4

    原题目 Describe:有点恶心的DP+最短路 code: #include<bits/stdc++.h> using namespace std; long long A,B,C,z, ...

  5. C#里的async和await的使用

    1. await指令调起线程执行异步方法和方法内后面的代码 2. await指令会阻塞当前方法后面的代码,但是不会阻塞外部调用 3. await必须搭配async使用,而async不一定需要有awai ...

  6. 服务器上安装解决ole错误

    服务器上安装此插件  提取码:9kiw

  7. centos 制作指定需求命令的YUM源

    场景: 没有YUM源,但是需要安装一些用到的命令,如vim,telnet等少量命令,不想YUM源太大,满足需求即可.于是制作一个仅需要满足要求的yum源 步骤一: 联网环境下安装createreo命令 ...

  8. Android进阶——Crash异常捕获并发送到服务器

    在项目中,我们常常会遇到Crash的现象,也就是程序崩溃的时候,这个时候最常看到的就是这个界面 如果你的项目已经发布到市场上了,这样的崩溃对于开发人员是看不到的,所以我们得想方法将崩溃信息发送到服务器 ...

  9. django数据库读写分离

    django数据库读写分离 1. 配置数据库 settings.py文件中 用SQLite: DATABASES = { 'default': { 'ENGINE': 'django.db.backe ...

  10. Mac 用终端（命令行）打开vscode编辑器

    1.打开控制面板(⇧⌘P) 2.输入 shell command 在提示里看到 Shell Command: Install ‘code’ command in PATH, 就可以了. 3.使用: c ...