以橫向模式打印網頁

我在需要以橫向模式打印的網頁上生成報告。以橫向模式打印網頁

我幾天來一直在尋找這個，並在網上找到了很多答案。基本上這是一個簡單的風格：

@page { 
    size: landscape; 
    margin: 0.5cm 0.5cm 0.5cm 0.5cm; 
}

但這似乎並沒有爲我工作。

任何人都可以請幫忙嗎？

謝謝。

來源

2016-09-23 Steve

它似乎已經有了答案，[請檢查此鏈接]（http://stackoverflow.com/questions/138422/landscape-printing-from-html） –

感謝您的迴應。是的，代碼確實有我認爲可行的解決方案，但這對我來說一直都不適用。瀏覽器似乎將方向作爲提示而不是命令。使用-webkit-transform，-moz-transform也不起作用。標題（示例中的第一個div在這裏 - https://www.dropbox.com/s/027765h9am7qh0c/sample.html.zip?dl=0）必須放在所有頁面上，如果我們旋轉，則不會正確顯示。我已經拿出了一半在我的頭上工作的頭髮。 – Steve

檢查此方法。我在Chrome和Mozilla Firefox中測試了這一點。您可以與您的內容進一步改善這一點，styles.Here是一個示例頁面，可以打印.Save此爲HTML頁面嘗試更喜歡這些你可以參考更多from here

<html> 
 

 
<head> 
 
    <style type="text/css"> 
 
    h3 { 
 
     text-align: center; 
 
    } 
 
    
 
    .output { 
 
     height; 
 
     8.5in; 
 
     width: 11in; 
 
     border: 1px solid red; 
 
     position: absolute; 
 
     top: 0px; 
 
     left: 0px; 
 
    } 
 
    @media print { 
 
     .output { 
 
     -ms-transform: rotate(270deg); 
 
     /* IE 9 */ 
 
     -webkit-transform: rotate(270deg); 
 
     /* Chrome, Safari, Opera */ 
 
     transform: rotate(270deg); 
 
     top: 1.5in; 
 
     left: -1in; 
 
     } 
 
    } 
 
    </style> 
 

 
</head> 
 

 
<body> 
 
    <div class="output"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 

 
Why do we use it? 
 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 

 

 
Where does it come from? 
 
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-09-23 11:39:04

謝謝你的回覆。我想，在這種情況下，我欠你一個道歉，我沒有完整描述我需要做什麼。標題的「位置」設置爲「固定」以使其具有它此報告既可以打印，也可以打印。我已經創建了一個包含必要元素和樣式的示例文件。它可以從這個保管箱鏈接下載 - https://www.dropbox.com/s/027765h9am7qh0c/sample.html.zip?dl=0 你會看到該框與標題重疊 – Steve

對不起，以前的評論沒有沒有正確地進入。我是這裏的第一個計時器。 :-) 在下面添加另一條評論。 – Steve

感謝您的回覆。我欠你一個道歉，因爲沒有全面瞭解我需要什麼。這是用於查看和打印圖像的矩陣，如2x2,3x3等的報告。我已經創建了一個包含必要元素和樣式的示例文件。 dropbox鏈接 - https://www.dropbox.com/s/027765h9am7qh0c/sample.html.zip?dl=0 您可以從頂級div中刪除類並打印預覽，以查看我需要的結果。標題的「位置」=「固定」，以便將其打印在所有頁面上。紅框邊框是顯示圖像的地方。與標題重疊的內容由padding-top處理。 – Steve

以橫向模式打印網頁

回答

相關問題