项目中打印和导出EXCel的思路

项目里要添加打印和导出EXCel的功能,但是在现有的页面布局上非常麻烦,问题记录如下:

1.表格使用了分页模式,每次点击上一页,下一页,或者第几页时都会再次调用ajax,页面上显示的永远只有6条数据。但是导出和打印都是要抽出所有的数据,这是个大问题。

导出Excel我试了几个方法,先列举如下:

  1.导出Excel功能本打算让后台写好,前台只需要下载就可以了,但是他做失败了,那只好自己来了。............

  2.点击“查询”按钮时只显示前6条数据,打算点击“导出Excel”时显示出所有的数据,不分页了,但是那样会破坏页面布局,很丑的啊。并且导出成功后还要把页面再变回原来的    样式,太麻烦了!

  3.同事想了一个办法,这个也比较笨,但是有效。就是再创建一个和上面的table一模一样的table,但是这个table隐藏起来。点击“导出Excel”按钮时调用ajax把所有的数据显    示在这个新table上,导出的数据就根据这个table显示出来。

导出Excel的办法我在自己的博客上也写过了,这里就不重复了。最后我们用了一个导出Excel库export2excel,但是这个库也有些问题,例如它识别td,不能把th表头显示出来,还有十几或者二十多位的数字在Excel都是科学计数法显示,并且会把后面几位的数字截断,这样数据就不正确了。

我的解决办法是把th换成td,但是CSS样式还是th,这样页面看起来就不会有变化。对于很长的数字让它以字符串的格式显现,这样就不会出错,

isNum:function(){
        var r,re;
        //re = /^d*.?d*$/;
        re=/^d{1,15}$/;
        r = this.text.match(re);
        return r;
        
    },

打印的问题和导出excel一样,不过呢我也试了几种方法,


1.最开始用的是 最简单的方法:window.print();,然后用下面的CSS代码把不想显示出来的都隐藏。

不过点击”打印“按钮时把所有的数据显示出来,影响了页面的布局,取消打印时又没有办法把页面变回原来的样式。这个方法不太好!

 <style  type="text/css" media="print">
        .noprint{display:none;}
        .main,.secondmain{background-image:none;}
        .main,.menu{border:none;}
        .content-wrap{border:1px solid rgb(229,229,229);margin:0 auto;float:none;}
    </style>
<p class="option noprint">&nbsp;</p>

2.用jquery插件printArea,直接打印上面所说的隐藏table,这样就没有任何问题,噢耶!

$("#cloneTable").printArea();
原文地址:https://www.cnblogs.com/xiang1336/p/3503116.html