goding

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>

 

分类:

技术点:

相关文章:

  • 2021-06-13
  • 2022-12-23
  • 2022-12-23
  • 2021-12-30
  • 2021-12-30
  • 2021-09-09
  • 2021-08-24
猜你喜欢
  • 2021-08-01
  • 2022-12-23
  • 2021-08-22
  • 2022-01-23
  • 2022-12-23
相关资源
相似解决方案