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. Spark2.1.0之初识Spark

    随着近十年互联网的迅猛发展,越来越多的人融入了互联网——利用搜索引擎查询词条或问题:社交圈子从现实搬到了Facebook.Twitter.微信等社交平台上:女孩子们现在少了逛街,多了在各大电商平台上的 ...

  2. BZOJ5157 & 洛谷3970：[TJOI2014]上升子序列——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=5157 https://www.luogu.org/problemnew/show/P3970 给定 ...

  3. HDOJ(HDU).4508 湫湫系列故事――减肥记I (DP 完全背包)

    HDOJ(HDU).4508 湫湫系列故事――减肥记I (DP 完全背包) 题意分析 裸完全背包 代码总览 #include <iostream> #include <cstdio& ...

  4. IDEA_MyBatis_SQLException：Parameter index out of range坑

    报错信息:超出数据库数据表设定的规定长度了 nested exception is org.apache.ibatis.type.TypeException: Could not set parame ...

  5. 【简单算法】17.字符串转整数（atoi）

    题目: 实现 atoi,将字符串转为整数. 在找到第一个非空字符之前,需要移除掉字符串中的空格字符.如果第一个非空字符是正号或负号,选取该符号,并将其与后面尽可能多的连续的数字组合起来,这部分字符即为 ...

  6. Codeforces Round #401 (Div. 2) A B C 水 贪心 dp

    A. Shell Game time limit per test 0.5 seconds memory limit per test 256 megabytes input standard inp ...

  7. 洛谷P4135 作诗 (分块)

    洛谷P4135 作诗 题目描述 神犇SJY虐完HEOI之后给傻×LYD出了一题: SHY是T国的公主,平时的一大爱好是作诗. 由于时间紧迫,SHY作完诗之后还要虐OI,于是SHY找来一篇长度为N的文章 ...

  8. [python]爬站点

    #!/usr/bin/python 2 import urllib 3 import urllib2 4 import re 5 import os 6 7 dirs = ['js','img','p ...

  9. 2017-2018-2 20179207 《网络攻防技术》python简明教程（1-10）

    Python3简明教程(一) 开始python之旅 使用交互模式的 Python3解释器 简单使用 vim 编写 Python3 脚本 执行 Python3 脚本 Python3 代码风格建议 Pyt ...

  10. mysql 创建视图

    1.单表创建视图 例如:创建一个选择语句,选出学生的编号,姓名和考号 //创建一个视图名字为stu_view1选择 来自数据表student中的id,name 和kn 中的数据 create view ...