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. 【题解】SCOI2006萌萌哒

    看到这题,首先想到\(n^{2}\)的暴力,就是用并查集暴力合并两个相等的点.但由于这样会导致反复地访问同一个操作,显然是不能够的.于是我们可以联想这题的特殊性质,就是互相连变的点都是一段一段的区间. ...

  2. [WC2005]友好的生物

    description 洛谷 求 \[max_{1\le i<j\le n}\{\sum_{s=1}^{k-1}(C_s-|D_{is}-D_{js}|)-(C_k-|D_{ik}-D_{jk} ...

  3. [NOI.AC省选模拟赛3.31] 附耳而至 [平面图+最小割]

    题面 传送门 思路 其实就是很明显的平面图模型. 不咕咕咕的平面图学习笔记 用最左转线求出对偶图的点,以及原图中每个边两侧的点是谁 建立网络流图: 源点连接至每一个对偶图点,权值为这个区域的光明能量 ...

  4. POJ3422：Kaka's Matrix Travels——题解

    http://poj.org/problem?id=3422 题目大意: 从左上角走到右下角,中途取数(数>=0),然后该点的数变为0,求走k的总价值和最大值. ———————————————— ...

  5. LOJ6342:：跳一跳——题解

    https://loj.ac/problem/6342 f[i]表示从i开始跳的期望时间,f[n]=0. 所以f[i]=(f[i]+f[i+1]+……+f[n])/(n-i+1)+1. 移项整理可求f ...

  6. 爬虫实例——爬取淘女郎相册（通过selenium、PhantomJS、BeautifulSoup爬取）

    环境 操作系统:CentOS 6.7 32-bit Python版本:2.6.6 第三方插件 selenium PhantomJS BeautifulSoup 代码 # -*- coding: utf ...

  7. 清北学堂模拟赛d6t6 棋盘迷宫

    3.棋盘迷宫(boardgame.pas/c/cpp)(boardgame.in/out)时间限制:5s/空间限制:256M[题目描述]小 A 和小 Z 是非常要好的朋友, 而且他们都对迷宫游戏非常有 ...

  8. POJ1679：The Unique MST（最小生成树）

    The Unique MST Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 38430   Accepted: 14045 ...

  9. poj2060——Taxi Cab Scheme（最小路径覆盖）

    Description Running a taxi station is not all that simple. Apart from the obvious demand for a centr ...

  10. springboot整合thumbnailator实现图片压缩

    springboot整合thumbnailator实现图片压缩 前言 最近由于首页产品列表图片显示太慢,经过研究发现是用户上传的图片太大. 针对这个问题,想到的解决方案是: 1. 产品上传时,限定图片 ...