以横向模式打印网页

我在需要以横向模式打印的网页上生成报告。以横向模式打印网页

我几天来一直在寻找这个，并在网上找到了很多答案。基本上这是一个简单的风格：

@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

以横向模式打印网页

回答

相关问题