单据页面的显示与打印小结

明天就可以踏上回家的旅途了，手头上的事也基本清了，终于有时间做个小总结了。最近做的工作很杂，主要是处理页面的打印和IE不同版本的兼容问题。

这段时间，对CSS和JavaScript更熟悉了，学到了一些打印知识。浏览器兼容问题，是最让人头疼的。

    CSS使用心得：

1.       页面上最好不要出现style字样，能用CSS定义的，尽量用CSS定义。

2.       CSS样式尽量简化，避免重复定义和矛盾定义，否则，很容易造成浏览器兼容问题。

3.       对一个元素进行多重定义，例：　　

td.withborder
{
    border : solid 1px #000 ;
}
td.center
{
    text-align : center ;
}
td.bold
{
    font-weight : bold ;
}

   如果想设置一个<td>有边框，居中，而且字体加粗，可以写为：

< td  class ="withborder center bold" >   </ td >

    这种方法对于复杂的样式设计，使用起来非常灵活。

4.       定义打印样式

< style  type ="text/css"  media ="print" >
</ style >

 

　　单据的打印(单张)：

　　这里用的是factory.printing 打印组件。通过object标签，把ScriptX引用进来，如果未安装ScriptX控件，会提示是否安装，安装之后可以进行预览和打印。

< object  id ="factory"  style ="display: none"  viewastext classid ="clsid:1663ed61-23eb-11d2-b92f-008048fdd814"  codebase ="smsx.cab#Version=6,3,436,14" >
</ object >

　　打印参数的设置：

PrintParameter

　　　　　function  GetPrintParameter() { 
             var  header  =  document.all[ " txtHiddenHeader " ].value;
             var  footer  =  document.all[ " txtHiddenFooter " ].value;
             var  left  =  document.all[ " txtHiddenLeft " ].value;
             var  right  =  document.all[ " txtHiddenRight " ].value;
             var  top  =  document.all[ " txtHiddenTop " ].value;
             var  bottom  =  document.all[ " txtHiddenBottom " ].value;

            document.all.factory.printing.header  =  header  ==   ""   ?   ""  : header;
            document.all.factory.printing.footer  =  footer  ==   ""   ?   ""  : footer;
            document.all.factory.printing.leftMargin  =  left  ==   ""   ?   0  : left;
            document.all.factory.printing.rightMargin  =  right  ==   ""   ?   0  : right;
            document.all.factory.printing.topMargin  =  top  ==   ""   ?   0  : top;
            document.all.factory.printing.bottomMargin  =  bottom  ==   ""   ?   0  : bottom;
            document.all.factory.printing.portrait  =   true       // 方向，true为纵向，false为横向
        }

 　　打印预览与打印：

Print

 　　 // 打印预览       
　　　　function  PrintPreview() {
          GetPrintParameter();
          document.all.factory.printing.Preview();         
           return   false ;
     　 }

     // 直接打印
         function  PrintSubmit() {
           GetPrintParameter();
            if  (document.all.factory.printing.PageSetup())           // 打印设置
           {
              document.all.factory.printing.Print( true )          
           }
            return   false ;
        }

 

 　　单据的打印(多张连打)：

　　根据选中的单据的个数，动态连续打印多张。

　　这里采用<iframe>和<div>组合的方式，形如：

代码

         < div id="divPrint" >
             < iframe  id ="container1"  src ="Page1.aspx" >
             </ iframe >
             < div  style ="page-break-after:always; height: 0;width:100%; border:0;" ></ div >
             < iframe  id ="container2"  src ="Page2.aspx" >
             </ iframe >
             < div  style ="page-break-after:always; height: 0;width:100%; border:0;" ></ div >
             < iframe  id ="container3"  src ="Page3.aspx" >
             </ iframe >
         </ div >

 

　　iframe的作用是引入需要打印的单据页面，div的作用仅仅是分页，并不显示出来。这样就能实现每个单据一页，多页连续打印了。

　　实际应用中，iframe和div是根据选中的单据，在后台动态生成的。

　　

　　IE兼容问题：textarea高度自适应

　　在IE6下，使用overflow-y:visible，textarea可以根据内容，自动增加高度，但是，打印时，却还是只能打印出定义高度内的内容，超出部分并不能打印出来。

　　在IE8下，overflow-y:visible，完全没有效果了，内容高度超过定义高度，会出现滚动条，打印时，滚动条内的内容不能打印出来，而且会打印出滚动条。

　　使用overflow-y:hidden，可以隐藏掉滚动条，同时也隐藏掉了超出的内容。

　　没有找到合适的CSS定义方法来解决这个问题，最后采用了JavaScript方法：

textarea

function  AdjustTextareaHeight(){
     var  objs  =  document.getElementsByTagName( " textarea " );
     for ( var  i  =   0 ; i  <  objs.length; i ++ ) {
         var  clientHt  =  objs[i].clientHeight;
         var  scrollHt  =  objs[i].scrollHeight;
         if (clientHt  <  scrollHt){
            objs[i].style.height  =  scrollHt  +   " px " ;
            }
            objs[i].style.overflow  =   " hidden " ;
    }
}

     其中，clientHeight是可视高度，scrollHeight是滚动高度。找了好久才找到clientHeight属性，支持IE各版本和FF，在FF下，定义objs[i].style.height 需要加上单位，否则不支持。

 

1.       要思考怎样用尽量少的代码解决问题，每一句代码都要有它的作用，多余的代码不仅会造成可读性的降低，而且可能造成功能的不稳定。

2.       不要用“差不多”来总结工作完成情况。

3.       着手之前，要对所分配的任务有大致的认识，有大致的思路。

4.       不会做的事情，学着去做，会做的事情，做到最好。

 

转载于:https://www.cnblogs.com/niuniu1985/archive/2010/02/09/1666696.html