我有一个HTML报告,需要打印的景观,因为许多列。是否有一种方法可以做到这一点,而不需要用户更改文档设置?
浏览器中有哪些选项。
我有一个HTML报告,需要打印的景观,因为许多列。是否有一种方法可以做到这一点,而不需要用户更改文档设置?
浏览器中有哪些选项。
当前回答
我用横向设置创建了一个空白的MS文档,然后在记事本中打开它。复制并粘贴以下内容到我的html页面
<style type="text/css" media="print">
@page Section1
{size:11 8.5in;
margin:.5in 13.6pt 0in 13.6pt;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:4;}
div.Section1
{page:Section1;}
</style>
<div class="Section1"> put text / images / other stuff </div>
打印预览以横向大小显示页面。这似乎在IE和Chrome上工作得很好,没有在FF上测试。
其他回答
我尝试了Denis的答案,遇到了一些问题(在使用横向页面后,纵向页面无法正常打印),所以这里是我的解决方案:
body { margin: 0; background: #CCCCCC; } div.page { margin: 10px auto; border: solid 1px black; display: block; page-break-after: always; width: 209mm; height: 296mm; overflow: hidden; background: white; } div.landscape-parent { width: 296mm; height: 209mm; } div.landscape { width: 296mm; height: 209mm; } div.content { padding: 10mm; } body, div, td { font-size: 13px; font-family: Verdana; } @media print { body { background: none; } div.page { width: 209mm; height: 296mm; } div.landscape { transform: rotate(270deg) translate(-296mm, 0); transform-origin: 0 0; } div.portrait, div.landscape, div.page { margin: 0; padding: 0; border: none; background: none; } } <div class="page"> <div class="content"> First page in Portrait mode </div> </div> <div class="page landscape-parent"> <div class="landscape"> <div class="content"> Second page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer) </div> </div> </div> <div class="page"> <div class="content"> Third page in Portrait mode </div> </div>
如前所述,size属性是您所需要的。要在打印时设置页面的方向和大小,您可以使用以下命令:
/* ISO Paper Size */
@page {
size: A4 landscape;
}
/* Size in mm */
@page {
size: 100mm 200mm landscape;
}
/* Size in inches */
@page {
size: 4in 6in landscape;
}
下面是@page文档的链接。
你可以使用css2 @page规则,它允许你将“size”属性设置为横向。
我的解决方案:
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
With media="print"只适用于print。 这适用于IE, Firefox和Chrome
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
在Firefox 16.0.2中不能运行,但在Chrome中可以运行