js导出execl

背景

起初的需求是这样的,有一批报表(纯手工写的那种),需要execl导出的功能,之前的导出,都是用poi写的,由服务器端完成生成文件的责任,再交由浏览器端下载,这样做的好处是服务器端的语言大多是强类型的语言,在对于导出的文件的控制上更为精细,面向所有浏览器,存在的缺点是,报表本身的生成就会消耗服务器资源,特别是功底差的同学,这点尤为突出,接下来再生成一次文件 基本就是重复一次上面的动作,对于服务器压力更甚。

因此,我就去寻找浏览器端的execl导出方案,服务端数据集发送一次到浏览器端,浏览器端抓取table直接导出。

正文

申明下我的方案是猜想,但是大多数代码部分是在网上找的,所以先展示第一种解决方案的代码,再进行评述


varuri='data:application/vnd.ms-excel;base64,',

template='{worksheet}{table}',

base64=function(s){returnwindow.btoa(unescape(encodeURIComponent(s))) },

format=function(s,c){

returns.replace(/{(\w+)}/g,

function(m,p){returnc[p]; }) }

returnfunction(table,name){

if(!table.nodeType)table=document.getElementById(table)

varctx={worksheet:name||'Worksheet', table:table.innerHTML}

window.location.href=uri+base64(format(template,ctx))

}

})()
function  getExplorer() {
    var explorer = window.navigator.userAgent ;
    //ie
    if (explorer.indexOf("MSIE") >= 0) {
        return 'ie';
    }
    //firefox
    else if (explorer.indexOf("Firefox") >= 0) {
        return 'Firefox';
    }
    //Chrome
    else if(explorer.indexOf("Chrome") >= 0){
        return 'Chrome';
    }
    //Opera
    else if(explorer.indexOf("Opera") >= 0){
        return 'Opera';
    }
    //Safari
    else if(explorer.indexOf("Safari") >= 0){
        return 'Safari';
    }
}
function tableToExcel(tableid) {//整个表格拷贝到EXCEL中
    if(getExplorer()=='ie')
    {
        var curTbl = document.getElementById(tableid);
        var oXL = new ActiveXObject("Excel.Application");

        //创建AX对象excel
        var oWB = oXL.Workbooks.Add();
        //获取workbook对象
        var xlsheet = oWB.Worksheets(1);
        //激活当前sheet
        var sel = document.body.createTextRange();
        sel.moveToElementText(curTbl);
        //把表格中的内容移到TextRange中
        sel.select;
        //全选TextRange中内容
        sel.execCommand("Copy");
        //复制TextRange中内容
        xlsheet.Paste();
        //粘贴到活动的EXCEL中
        oXL.Visible = true;
        //设置excel可见属性

        try {
            var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
        } catch (e) {
            print("Nested catch caught " + e);
        } finally {
            oWB.SaveAs(fname);

            oWB.Close(savechanges = false);
            //xls.visible = false;
            oXL.Quit();
            oXL = null;
            //结束excel进程,退出完成
            //window.setInterval("Cleanup();",1);
            idTmr = window.setInterval("Cleanup();", 1);

        }

    }
    else
    {
        tableToExcel('ta')
    }
}

html部分

<buttontype="button" onclick="tableToExcel('表格id','导出文件的sheet名')">Excel导出</button>

以上这种方式的原来帖子,百度一搜一大把,我也是用过一段时间突然在今天发现,这种方式的导出有个严重的问题存在,就是不能导出超过200条以上的table,但是速度奇快,但是分浏览器的。
下面介绍,今天我刚发现的一种,来自github的一个作者,这种方式可以弥补上面的条数限制的问题,同时作者为我们提供了PDF、CVS、DOC、SQL、XLS、XLSX等等格式的导出,有深入需求的可以去观摩源码
https://github.com/hhurz/tableExport.jquery.plugin
下面贴代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>HTML table Export</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <!-- <script type="text/javascript" src="../libs/js-xlsx/xlsx.core.min.js"></script> -->
  <script type="text/javascript" src="../libs/FileSaver/FileSaver.min.js"></script>
  <script type="text/javascript" src="../tableExport.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      var Table = document.getElementById ( 'container' );
      var T = [];
      var r = 0;
      var c = 1;
      var rmax = 5555;
      var cmax = 26;
      T.push('<table id="grid">');
      T.push('<thead>');
      T.push('<tr>');
      T.push('<th>col #</th>');
      while (++c <= cmax+1)
        T.push('<td>col ' + c + '</td>');
      T.push('</tr>');
      T.push('</thead>');
      T.push('<tbody>');
      while (r++ < rmax) {
        c = 0;
        T.push('<tr>');
        T.push('<td>' + r + '</td>');
        while (c++ < cmax)
          T.push('<td>' + getRandomInt(100,10000) + '</td>');
        T.push('</tr>');
      }
      T.push('</tbody>');
      T.push('</table>');
      Table.innerHTML = T.join ("");
      $('#export').click(function() {
//2003版
        $('#grid').tableExport({type:'excel',fileName:'文件名', excelstyles:['border-bottom', 'border-top', 'border-left', 'border-right']});
//2007版
        // $('#grid').tableExport({type:'xlsx', excelstyles:['border-bottom', 'border-top', 'border-left', 'border-right']});
      });
    });
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
</script>

</head>
  <body>
    <button id="export">Export to Excel</button>
    <div id="container">
    </div>
  </body>
</html>

这里注意要引入的文件,如果是导出2003版本的execl文件,直接复制上面代码中的js文件进项目即可,
如果需要2007版本的放开代码中的注释,屏蔽掉2003版本的导出语句
源码提供了很多很多的设置参数,这个真的很方便,我贴一部分代码,一看便知

$.fn.extend({
    tableExport: function (options) {
      var defaults = {
        consoleLog:        false,//是否在控制台输出
        csvEnclosure:      '"',
        csvSeparator:      ',',
        csvUseBOM:         true,
        displayTableName:  false,
        escape:            false,
        excelFileFormat:   'xlshtml',     // xmlss = XML Spreadsheet 2003 file format (XMLSS), xlshtml = Excel 2000 html format
        excelRTL:          false,         // true = Set Excel option 'DisplayRightToLeft'
        excelstyles:       [],            // e.g. ['border-bottom', 'border-top', 'border-left', 'border-right']
        exportHiddenCells: false,         // true = speed up export of large tables with hidden cells (hidden cells will be exported !)
        fileName:          'tableExport',//导出的execl文件名
        htmlContent:       false,
        ignoreColumn:      [],
        ignoreRow:         [],
        jsonScope:         'all',  

最后建议多阅读源码,感谢源码的提供者。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,496评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,407评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,632评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,180评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,198评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,165评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,052评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,910评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,324评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,542评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,711评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,424评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,017评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,668评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,823评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,722评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,611评论 2 353

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,075评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,651评论 18 139
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,094评论 4 62
  • 早上起来有点起床气,原因在于昨天夜里没有睡好觉,孩子一直在哭闹,她哭闹的原因可能是 由于睡得不踏实,外面很多野狗,...
    踏上笔尖阅读 511评论 0 0
  • 人类视觉跟很多动物不同的地方,是人类具有立体视觉,双眼立体视觉可以准确的定位,判断物体的远近,因此对于目标可以很清...
    马可约伯阅读 222评论 0 0