當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

浏览器横向打印

發布時間：2023/12/19 综合教程 28 生活家

生活随笔收集整理的這篇文章主要介紹了浏览器横向打印小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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 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>

總結

以上是生活随笔為你收集整理的浏览器横向打印的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。