备忘录

记录点滴技术

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

1、用横向打印的css样式,但实际使用发现只有谷歌浏览器能生效

@page {size: landscape;} 

2、用要打印的内容放到一个div中,然后用css样式把div旋转90度。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>    
    <style type="text/css">
        @media print
        {
            .noprint
            {
                display: none;
            }
           .divPint
           {
               -webkit-transform: rotate(-90deg);
                -moz-transform: rotate(-90deg);
                -ms-transform: rotate(-90deg);            
                 position:absolute;left:-100px;
                 width: 960px;height:500px;margin-top:250px;
         border:solid 1px black;
                 display:block;
            }
            
            .divShow
            {
                display:none;
            }            
        }
        
        @media screen 
        {
             .divPint
            {              
                  display: none;
            }
            
            .divShow
            {
                padding: 10px; margin: 0px auto; width: 960px;height:500px;border:solid 1px black;
            } 
        }    
             
               
    </style>
</head>
<body style='padding: 0px; margin: 0px;'>
    <form id="form1" runat="server">
    <div>
        <div class='divPint'> 
         我是打印的div
        </div> 
        <div class='divShow'> 
        我是显示的div
        </div>    
    <div style="padding-top: 20px; text-align: center;" class="noprint" id="tool" runat="server">
        <input id="Button1" type="button" value="打印" onclick='javascript:window.print();' />&nbsp;&nbsp;<input
            id="Button2" type="button" value="关闭" onclick='javascript:window.close();' />
    </div>
    </div>
    </form>
</body>
</html>

 

posted on 2020-11-11 21:34  goding  阅读(471)  评论(0编辑  收藏  举报