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

明天就可以踏上回家的旅途了，手头上的事也基本清了，终于有时间做个小总结了。最近做的工作很杂，主要是处理页面的打印和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>

　　打印参数的设置：

　　　　　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.       不会做的事情，学着去做，会做的事情，做到最好。