Joh*_*ohn 363
在CSS中,您可以设置@page属性,如下所示.
@media print{@page {size: landscape}}
@page是CSS 2.1规范的一部分,但size问题的答案并未突出显示问题是@Page {size:landscape}已过时？:
CSS 2.1不再指定size属性.CSS3 Paged Media模块的当前工作草案确实指定了它(但这不是标准的或接受的).
如上所述,size选项来自CSS 3草案规范.从理论上讲,它可以设置为页面大小和方向,但在我的示例中,省略了大小.
支持与firefox中提交的错误报告混合在一起,大多数浏览器都不支持它.
它似乎可以在IE7中工作,但这是因为IE7会记住用户在打印预览中最后选择的横向或纵向(仅重新启动浏览器).
本文确实有一些使用JavaScript或ActiveX向用户浏览器发送密钥的建议工作,尽管它们并不理想,并且依赖于更改浏览器安全设置.
或者,您可以旋转内容而不是页面方向.这可以通过创建样式并将其应用于包含这两行的主体来完成,但这也有回退创建许多对齐和布局问题.
<style type="text/css" media="print">
.page
{
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
我找到的最后一个选择是在PDF中创建横向版本.您可以指向用户选择打印时打印PDF.但是我无法在IE7中进行自动打印工作.
<link media="print" rel="Alternate" href="print.pdf">
总而言之,在某些浏览器中,使用@page大小选项很容易实现相对性,但在许多浏览器中,没有确定的方法,这取决于您的内容和环境.这可能是Google文档在选择打印时创建PDF然后允许用户打开并打印PDF的原因.
Edu*_*omo 27
我的解决方案
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
这适用于IE,Firefox和Chrome
Ahm*_*lfy 13
@page规则已从CSS2缩减到CSS2.1.据报道,完整的CSS2 @page规则仅在Opera中实现(即便如此,也是如此).我自己的测试显示IE和Firefox根本不支持@page.根据现在过时的CSS2规范部分13.2.2,可以覆盖用户的方向设置和(例如)强制打印横向,但相关的"尺寸"属性已从CSS2.1中删除,与事实一致目前没有浏览器支持它.它已在CSS3分页媒体模块中恢复,但请注意,这只是一个工作草案(截至2009年7月).
结论:忘记现在的@page.如果您觉得您的文档需要以横向打印,请问您自己是否可以使您的设计更加流畅.如果你真的不能(例如,因为该文档包含具有许多列的数据表),您将需要建议用户将方向设置为Landscape,并可能概述如何在最常见的浏览器中执行此操作.当然,有些浏览器具有适合宽度(缩小到适合)的打印功能(例如Opera,Firefox,IE7),但是不建议依赖具有此功能或打开它的用户.
giz*_*zmo 12
尝试添加这个CSS:
@page {
size: landscape;
}
Den*_*nis 11
仅仅旋转页面内容是不够的。这是适用于大多数浏览器（Chrome，Firefox，IE9 +）的正确CSS。
首先将主体设置margin为0，因为否则页边距将大于在打印对话框中设置的页边距。还要设置background颜色以使页面可视化。
body {
margin: 0;
background: #CCCCCC;
}
margin，border并且background是可视化页面所必需的。
padding必须设置为所需的打印边距。在打印对话框中，您必须设置相同的边距（在此示例中为10mm）。
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}
A4页面的尺寸为210mm x 297mm。您需要从尺寸中减去打印边距。并设置页面内容的大小：
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}
我使用276mm而不是277mm，因为不同的浏览器对页面的缩放略有不同。因此，其中一些将在两页上打印277毫米高的内容。第二页将为空。使用276mm更安全。
我们不需要任何margin，border，padding，background在打印页面上，所以其删除：
@media print {
body {
background: none;
-ms-zoom: 1.665;
}
div.portrait, div.landscape {
margin: 0;
padding: 0;
border: none;
background: none;
}
div.landscape {
transform: rotate(270deg) translate(-276mm, 0);
transform-origin: 0 0;
}
}
注意，变换的原点是0 0！此外，横向页面的内容必须向下移动276mm！
另外，如果您同时使用纵向和横向页面，IE会缩小页面。我们通过将其设置-ms-zoom为1.665来修复它。如果将其设置为1.6666或类似的内容，有时页面内容的右边框可能会被裁剪。
如果您需要IE8-或其他旧的浏览器支持，您可以使用-webkit-transform，-moz-transform，filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)。但是对于足够现代的浏览器来说，则不是必需的。
这是一个测试页：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
...Copy all styles here...
</style>
</head>
<body>
<div class="portrait">A portrait page</div>
<div class="landscape">A landscape page</div>
</body>
</html>
如上所述,该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文档的链接.
您还可以使用非标准的IE-only css属性写入模式
div.page {
writing-mode: tb-rl;
}
| 归档时间： |
|
| 查看次数： |
347250 次 |
| 最近记录： |