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. python函数入门到高级

    函数的定义: def test(x): "The function definitions" x+=1 return x def:定义函数的关键字 test:函数名 ():内可定义 ...

  2. 【题解】HNOI2016网络

    整体二分是个好东西!可我忘记了它QAQ其实当你知道这题可以整体二分的时候就已经不难了(个人觉得这是最难想到的一点啊).整体二分的话,我们就可以把问题转化为是否有一条权值 \(>= k\) 的链经 ...

  3. [洛谷P1369]矩形

    题目大意:有$n(n\leqslant300)$个点,每个点坐标范围在$[1\sim100]$,求一个矩阵,使得边界上的点最多. 题解:做一遍二维前缀和,直接暴力枚举两个顶点 卡点:无 C++ Cod ...

  4. FPGA学习记录_设计一个计数器

    此处设计一个数器,使 学习板上 的 LED 状态每 500ms翻转一次. 学习板上晶振为50MHz,也就是说时钟周期为 20ns , 这样可以计算得出 500ms = 500_000_000ns/20 ...

  5. 【BZOJ1031】字符加密（后缀数组）

    [BZOJ1031]字符加密(后缀数组) 题面 BZOJ 洛谷 题解 把字符串倍长 然后直接求后缀数组, 拍好序之后直接输出就行了. (我只是复习一下\(SA\)而已) #include<ios ...

  6. BZOJ1012：[JSOI2008]最大数——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=1012 https://www.luogu.org/problemnew/show/P1198 现在 ...

  7. [Leetcode] valid palindrome 验证回文

    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...

  8. Hadoop，大数据，云计算三者之间的关系

    大数据和云计算是何关系?关于大数据和云计算的关系人们通常会有误解.而且也会把它们混起来说,分别做一句话直白解释就是:云计算就是硬件资源的虚拟化;大数据就是海量数据的高效处理.大数据.hadoop及云计 ...

  9. python2.6升级2.7导致yum无法使用 No module named yum

    这里有解决方法:https://teddysun.com/473.html 记住旧版本 Python 2.6.6 的重要路径如下所示,在运行 yum 命令的时候,会提示你哪个 module 不存在,不 ...

  10. （译）理解python线程

    看到一篇老外写的线程文章,很赞,零基础都能看懂.先贴在这里,有时间再翻译出来. http://agiliq.com/blog/2013/09/understanding-threads-in-pyth ...