zoukankan      html  css  js  c++  java
  • 项目中打印和导出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();
  • 相关阅读:
    交通综合改造工程EPC总承包项目
    二三维一体化地理信息平台
    NetCore3.1升级到Net5.0序列化方法过时问题
    windows server2012部署.net core IIS,页面报503,应用程序池自动停止。。。
    NetCore使用NPOI导入Word中的图片信息
    NetCore 使用 iTextSharp 读取 PDF 中的文字信息
    NetCore 在 Docker中文件路径找不到的问题
    Vue中数组list直接push的是对象而不是追加数据的问题
    netcore3.1增加阿里云OSS云存储服务
    Centos中Docker容器中程序访问宿主机Redis和Mysql
  • 原文地址:https://www.cnblogs.com/xiang1336/p/3503116.html
Copyright © 2011-2022 走看看