1导入与导出功能实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="button" value="导入" onclick="file_in()"><br><br>

<input type="button" value="导出" onclick="file_out()">

<!--导入文件使用控件-->

<input type="file" id="excel_in" style="display:none;" />

<!-- 导出文件使用控件，标签不需要内容 -->

<a href="javascript" id="excel_out" download="这里是下载的文件名.xlsx"  style="display:none;"></a>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>

<script type="text/javascript" src="xlsxhelper.js"></script>

<script type="text/javascript">

    //导入excel

    function file_in() {

        $('#excel_in').click();

    }

    $('#excel_in').change(function (e) {

        xlsx.importf(this, getexceldata);

    })

    function getexceldata(info) {

        console.log(info);

    }

    var jsono = [{ //测试数据

        "保质期临期预警(天)": "adventLifecycle",

        "商品标题": "title",

        "建议零售价": "defaultPrice"

    }, { //测试数据

        "保质期临期预警(天)": "adventLifecycle2",

        "商品标题": "title2",

        "建议零售价": "defaultPrice2"

    }];

    //导出excel

    function file_out() {

        $('#excel_out').attr('download', 'download.xls');

        xlsx.downloadExl(jsono, $('#excel_out')[0]);

    };

</script>

</body>

</html>

html页

;(function () {

    window.xlsx = window.xlsx || {

        /*para*/

        /*end para*/

        /*function*/

        //excel内容读取（只读取第一个sheet）

        /* FileReader共有4种读取方法：

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

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

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

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

        importf: function (obj, callback) {//导入

            if (!obj.files) {

                callback('');

                return;

            }

            var f = obj.files[0];

            var reg = /^.*\.(?:xls|xlsx)$/i;//文件名可以带空格

            if (!reg.test(f.name)) {//校验不通过

                alert("请上传excel格式的文件!");

                callback('');

                return;

            }

            var wb;//读取完成的数据

            var rABS = false; //是否将文件读取为二进制字符串

            var reader = new FileReader();

            reader.onload = function (e) {

                var data = e.target.result;

                if (rABS) {

                    wb = XLSX.read(btoa(xlsx.fixdata(data)), {//手动转化

                        type: 'base64'

                    });

                } else {

                    wb = XLSX.read(data, {type: 'binary'});

                }

                //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字

                //wb.Sheets[Sheet名]获取第一个Sheet的数据

                //document.getElementById("demo").innerHTML = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));

                var dom = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);

                callback(dom);

                return;

            };

            if (rABS) {

                reader.readAsArrayBuffer(f);

            }

            else {

                reader.readAsBinaryString(f);

            }

        },

        fixdata: function (data) { //文件流转BinaryString

            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;

        },

        downloadExl: function (json, targetdom, type) {

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

            var tmpdata = json[0];

            json.unshift({});

            var keyMap = []; //获取keys

            //keyMap =Object.keys(json[0]);

            for (var k in tmpdata) {

                keyMap.push(k);

                json[0][k] = k;

            }

            var tmpdata = [];//用来保存转换好的json

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

                v: v[k],

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

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

                v: v.v

            });

            var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10

            var tmpWB = {

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

                Sheets: {

                    'mySheet': Object.assign({},

                        tmpdata, //内容

                        {

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

                        })

                }

            };

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

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

            ))], {

                type: ""

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

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

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

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

            targetdom.href = href;

            targetdom.click();

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

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

            }, 100);

        },

        s2ab: function (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]。

        getCharCol: function (n) {

            var temCol = '';

            var s = '';

            var m = 0;

            while (n > 0) {

                m = n % 26 + 1;

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

                n = (n - m) / 26;

            }

            return s;

        },

        //生成新的GUID

        getHtml: function () {

            //alert($('.breadcrumbs').html());

        }

        /*end function*/

    }

})();

xlsxhelper.js

js-xlsx操作excel表格的更多相关文章

  1. Python 利用Python操作excel表格之openyxl介绍Part2

    利用Python操作excel表格之openyxl介绍 by:授客 QQ:1033553122 欢迎加入全国软件测试交流qq群(群号:7156436) ## 绘图 c = LineChart()    ...

  2. Python 利用Python操作excel表格之openyxl介绍Part1

    利用Python操作excel表格之openyxl介绍 by:授客 QQ:1033553122 欢迎加入全国软件测试交流qq群(群号:7156436),免费获取以下性能监控工具(类似Nmon精简版) ...

  3. 【转】python操作excel表格(xlrd/xlwt)

    [转]python操作excel表格(xlrd/xlwt) 最近遇到一个情景,就是定期生成并发送服务器使用情况报表,按照不同维度统计,涉及python对excel的操作,上网搜罗了一番,大多大同小异, ...

  4. 用NPOI、C#操作Excel表格生成班级成绩单

    在C#中利用NPOI操作Excel表格非常方便,几乎上支持所有的Excel表格本身所有的功能,如字体设置.颜色设置.单元格合并.数值计算.页眉页脚等等. 这里准备使用NPOI生成一个班级成绩单Exce ...

  5. 转载：python操作excel表格(xlrd/xlwt)

    python操作excel表格(xlrd/xlwt)   最近遇到一个情景,就是定期生成并发送服务器使用情况报表,按照不同维度统计,涉及python对excel的操作,上网搜罗了一番,大多大同小异,而 ...

  6. 使用Java操作Excel表格

    目录 一.配置第三方库 二.使用Apache POI API 1. 打开Excel文件 2. 选择对应的sheet 3. Sheet接口的基本使用 3.1 获取开头行和结束行 3.2 获取Row对象 ...

  7. qt 操作excel表格

     自己编写的一个Qt C++类,用于操作excel表格,在Qt中操作excel需在.pro中增加CONFIG+=qaxcontainer配置. 1.打开Excel:objExcel = new QAx ...

  8. Python 利用Python操作excel表格之xlwt介绍

    利用Python操作excel表格之xlwt介绍   by:授客 QQ:1033553122 直接上代码   案例1 #!/usr/bin/env python # -*- coding:utf-8 ...

  9. python - 操作excel表格

    说明:由于公司oa暂缺,人事妹子在做考勤的时候,需要通过几个excel表格去交叉比对员工是否有旷工或迟到,工作量大而且容易出错. 这时候it屌丝的机会来啦,花了一天时间给妹子撸了一个自动化脚本. 1. ...

  10. 【面试题】js实现将excel表格copy到页面

    js实现将excel表格copy到页面 点击打开视频讲解更加详细 其实最核心的技术,还是copy的是我们粘贴板上的数据 就像平常怎么粘贴复制其他的数据一样,只是我们在excel粘贴的是一个表格数据 这 ...

随机推荐

  1. [洛谷P4092][HEOI2016/TJOI2016]树

    题目大意:给你一棵树,有两个操作: $C\;x:$给第$x$个节点打上标记 $Q\;x:$询问第$x$个节点的祖先中最近的打过标记的点(自己也是自己的祖先) 题解:树剖,可以维护区间或,然后若一段区间 ...

  2. [NOIP2015 TG D2T3]运输计划

    题目大意: 给你一棵n个节点的树,有边权,有多个任务,每个要求从ui号节点到 vi号节点去.m 个计划, 这 m 个计划会同时开始.当这 m 个任务都完成时,工作完成. 现在可以把任意一个边的边权变为 ...

  3. BZOJ2301：[HAOI2011]Problem b——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=2301 https://www.luogu.org/problemnew/show/P2522 对于给 ...

  4. Linux实验一

    一.Linux 简介 1.Linux 就是一个操作系统,就像你多少已经了解的 Windows(xp,7,8)和 Max OS , 我们的 Linux 也就是系统调用和内核那两层,当然直观的来看,我们使 ...

  5. 20165218 学习基础和C语言基础调查

    个人技能及阅读心得 个人技能之绘画 绘画是我从很小便开始接触的,从最初的简笔画到国画.素描.水粉,大约也学了七八年.但是到了高中之后,就逐渐放下了. 记得当初学素描时,老师的一句话让我记忆犹新,她说, ...

  6. HDOJ(HDU).2602 Bone Collector (DP 01背包）

    HDOJ(HDU).2602 Bone Collector (DP 01背包) 题意分析 01背包的裸题 #include <iostream> #include <cstdio&g ...

  7. bzoj4773: 负环（倍增floyd）

    浴谷夏令营例题...讲师讲的很清楚,没看题解代码就自己敲出来了 f[l][i][j]表示i到j走2^l条边的最短距离,显然有f[l][i][j]=min(f[l][i][j],f[l-1][i][k] ...

  8. 破解wingide编辑器

    先到官网下载最新版的wingide(我下载的是5.1.11-1),然后安装,打开,出现下面的界面时选第三个,然后输入“ENX27-HWM6G-XYVFA-165PG”,如下图所示: 接下来你软件会给你 ...

  9. 用户登录拦截器查询到登录用户后如何将用户信息传递到后面的Controller

    taotao创建订单代码中之前忘了加入用户信息,那么加上呢? 分析:用户创建订单的时候,我们会强制要求用户先登录,也就是说,创建订单的Controller执行时,一定是用户已经登录了的,而用户只要登录 ...

  10. 神经网络CNN训练心得--调参经验

    1.样本要随机化,防止大数据淹没小数据 2.样本要做归一化.关于归一化的好处请参考:为何需要归一化处理3.激活函数要视样本输入选择(多层神经网络一般使用relu)4.mini batch很重要,几百是 ...