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. [luogu1654]OSU!

    update 9.20:本篇题解已经被\(yyb\)证明是出锅的 这道题目最后的式子看上去是很简单的,不到10行就码完了,但是求式子的过程并没有那么简单. 很容易想到一种枚举思路: 因为每一段连续的1 ...

  2. BZOJ3670 [Noi2014]动物园 【KMP计数】

    3670: [Noi2014]动物园 Time Limit: 10 Sec  Memory Limit: 512 MB Submit: 3143  Solved: 1690 [Submit][Stat ...

  3. HDU.1596 find the safest road (Floyd)

    HDU.1596 find the safest road (Floyd) 题意分析 与普通的最短路不太相同,本题有些许的变化. 1. 要找到由i到j最安全的路,故在求解的时候要保证mp[i][j]尽 ...

  4. Dalvik虚拟机中DexClassLookup结构解析

    http://blog.csdn.net/roland_sun/article/details/46877563 原文如下: 在Android系统中,所有的类定义以及具体的代码都是包含在DEX文件中的 ...

  5. [nginx]nginx rewrite规则之last和break

    c俺靠这篇博文 http://eyesmore.iteye.com/blog/1142162 有用的配置: 1.开启rewrite_log,这样在/var/log/nginx/error.log中显示 ...

  6. Moodle插件开发系列——XMLDB编辑器

    Moodle插件开发系列——XMLDB编辑器 位置:网站管理>开发> XML编辑器 l  XML编辑器是制作install.xml文件的工具,而install.xml是指定Moodle建立 ...

  7. [LeetCode] 15. 3Sum ☆☆

    Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...

  8. Android 之 Spinner 键值对的绑定(转)

    很多时候我们会在下拉菜单中绑定一个值,但是 Spinner本身不提供这样的服务 于是在网上找了N久,终于找到一个简单易用的方案;废话不多说,直接上菜了 首先要定义一个Item类,有以下要注意的:    ...

  9. intellij idea 破解补丁激活

    一.说明 idea激活可以用JetBrains account,Activation Code注册码或者填License server网址,使用注册码的方式可以参考lanyun提供的注册码,但是有效时 ...

  10. intellij idea 中添加maven远程仓库

    在intellij idea 中配置好maven后 是这样的 如果加载失败,则需要自定义远程仓库,这里以阿里maven仓库为例, 在项目的pom文件中添加以下配置 <repositories&g ...