项目中打印和导出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