我有一个HTML报告，需要打印的景观，因为许多列。是否有一种方法可以做到这一点，而不需要用户更改文档设置?
浏览器中有哪些选项。
当前回答
我尝试了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>
其他回答
你也可以使用非标准的IE-only css属性写入模式
div.page {
writing-mode: tb-rl;
}
在CSS中，您可以设置如下所示的@page属性。
@media print{@page {size: landscape}}
@page是css2.1规范的一部分，但是这个尺寸并没有像回答“@page {size:landscape}过时了吗?：
CSS 2.1不再指定size属性。目前的工作 CSS3页面媒体模块的草案没有指定它(但这不是 标准或接受)。
如上所述，大小选项来自css3草案规范。理论上，它可以设置为页面大小和方向，尽管在我的示例中，大小被省略了。
这种支持与firefox中的bug报告混合在一起，大多数浏览器都不支持它。
它在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 size选项相对容易，但在许多浏览器中，没有确定的方法，这将取决于你的内容和环境。 这可能是为什么谷歌文档在选择打印时创建PDF，然后允许用户打开并打印。
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
在Firefox 16.0.2中不能运行，但在Chrome中可以运行
我的解决方案:
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
With media="print"只适用于print。 这适用于IE, Firefox和Chrome
仅仅旋转页面内容是不够的。下面是一个正确的CSS，它可以在大多数浏览器(Chrome, Firefox, IE9+)中工作。
首先将正文边距设置为0，否则页面边距将大于您在打印对话框中设置的页边距。同时设置背景颜色以使页面可视化。
body {
margin: 0;
background: #CCCCCC;
}
页边距、边框和背景是可视化页面所必需的。
填充必须设置为所需的打印边距。在打印对话框中，必须设置相同的边距(本例中为10mm)。
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}
A4页大小为210毫米x297毫米。你需要从尺寸中减去打印边距。并设置页面内容的大小:
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}
我使用276mm而不是277mm，因为不同的浏览器对页面的缩放略有不同。所以有些媒体会在两页纸上打印277mm高的内容。第二页将为空。使用276mm更安全。
我们不需要打印页面上的任何边距、边框、填充、背景，所以删除它们:
@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!另外，横向页面的内容必须向下移动276毫米!
此外，如果你的页面混合了纵向和横向，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>
