• 项目中打印和导出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();
  • 相关阅读:
    c# 使用ajaxfileupload上传文件,通过一般处理程序(Handler)接收文件 ashx 图片 Excel文件都可以
    C#+aspx+ajaxfileupload 实现文件上传
    Java中的int与String互相转换方式
    简述 readyonly 与 disabled 的区别
    was应用服务器搭建
    MVC中贫血模型与充血模型
    npm安装教程 Vue环境搭建
    使用vs Code从0开始搭建一个vue项目(手把手教会你,包会)
    使用VS code 打开Vue项目
    Task , Thread 学习
  • 原文地址:https://www.cnblogs.com/xiang1336/p/3503116.html
Copyright © 2020-2023  润新知