我有一份HTML报告，由于列数众多，因此需要打印横向报告。有没有办法在不需要用户更改文档设置的情况下执行此操作？
浏览器有哪些选择。
答案 0 :(得分：342)
在CSS中，您可以设置@page属性，如下所示。
@media print{@page {size: landscape}}
@page是CSS 2.1 specification的一部分，但问题Is @Page { size:landscape} obsolete?的答案并未突出显示size：
CSS 2.1不再指定size属性。目前的工作 CSS3分页媒体模块的草稿确实指定了它（但事实并非如此） 标准或接受）。
如上所述，尺寸选项来自CSS 3 Draft Specification。从理论上讲，它可以设置为页面大小和方向，但在我的示例中，大小被省略。
支持与bug report begin filed in firefox混合在一起，大多数浏览器都不支持它。
它似乎可以在IE7中运行，但这是因为IE7会记住用户在打印预览中最后选择的横向或纵向（仅重新启动浏览器）。
This article确实有一些使用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，然后允许用户打开并打印它。
答案 1 :(得分：27)
我的解决方案：
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
这适用于IE，Firefox和Chrome
答案 2 :(得分：12)
尝试添加这个CSS：
@page {
size: landscape;
}
答案 3 :(得分：12)
@page规则已被删除 范围从CSS2到CSS2.1。满满的 据报道，CSS2 @page规则 仅在Opera中实现（并且很繁琐 即使这样）。我自己的测试表明 IE和Firefox不支持@page at 所有。根据现在的过时 CSS2规范第13.2.2节 可以覆盖用户的 方向设置和（为 示例）在Landscape中强制打印 但相关的“大小”属性有 从CSS2.1中删除，一致 事实上，没有当前的浏览器 支持它。它已经恢复了 CSS3分页媒体模块，但请注意 这只是一份工作草案（如 在2009年7月）。
结论：忘了 关于现在的@page。如果你 觉得你的文件需要打印 在横向方向，问问自己 如果你能改变你的设计 更流畅。如果你真的不能 （也许是因为该文件包含 包含许多列的数据表 例如），你需要建议 用户将方向设置为 景观也许还要概述如何 在最常见的浏览器中执行此操作。的 当然，有些浏览器有打印 适合宽度（缩小到适合）的功能 （例如Opera，Firefox，IE7）但它确实如此 不宜依赖用户拥有 这个设施或切换它 上。
答案 4 :(得分：8)
您可以使用允许您设置CSS 2 @page rule的'size' property to landscape。
答案 5 :(得分：6)
如上所述，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 documentation的链接。
答案 6 :(得分：5)
您还可以使用非标准的仅限IE的css属性writing-mode
div.page {
writing-mode: tb-rl;
}
答案 7 :(得分：4)
仅仅旋转页面内容还不够。这是一个适用于大多数浏览器的正确CSS（Chrome，Firefox，IE9 +）。
首先将正文margin设置为0，否则页面边距将大于您在打印对话框中设置的页边距。同时设置background颜色以显示页面。
body {
margin: 0;
background: #CCCCCC;
}
margin，border和background是可视化网页所必需的。
padding设置为所需的打印边距。在打印对话框中，您必须设置相同的边距（在此示例中为10毫米）。
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;
}
我使用的是276毫米而不是277毫米，因为不同的浏览器会略微缩放页面。因此，其中一些将在两页上打印277mm高度的内容。第二页将为空。使用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！
此外，如果您混合使用纵向和lanscape页面，IE将缩小页面。我们通过将-ms-zoom设置为1.665来解决此问题。如果您将其设置为1.6666或类似的内容，有时可能会裁剪页面内容的右边框。
如果您需要IE8或其他旧浏览器支持，则可以使用-webkit-transform，-moz-transform，filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)。但对于现代化的浏览器，它并不是必需的。
答案 8 :(得分：2)
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
无法在Firefox 16.0.2中运行，但它在Chrome中正常运行
答案 9 :(得分：1)
这是我想出的 - 向 <html> 元素添加负旋转，向 <body> 添加相同 abs 值的正旋转。这样就不必添加大量 CSS 来为主体设置样式，而且效果非常好：
html {
transform: rotate(-90deg);
}
body {
transform: rotate(90deg);
}
答案 10 :(得分：1)
我创建了一个带有横向设置的空白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上测试。
答案 11 :(得分：1)
<style type="text/css" media="print">
.landscape {
width: 100%;
height: 100%;
margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1);
}
</style>
如果您希望将此样式应用于表格，则使用此样式类创建一个div标签，并在此div标签中添加表格标签，并在末尾关闭div标签。
此表格仅以横向打印，所有其他页面仅以纵向模式打印。但问题是如果表格大小超过页面宽度，那么我们可能会丢失一些行，有时标题也会丢失。小心。
祝你有个美好的一天。
谢谢你， Naveen Mettapally。
答案 12 :(得分：1)
我尝试过一次解决这个问题，但我所有的研究都让我走向了ActiveX控件/插件。浏览器（3年前无论如何）都不允许更改任何打印设置（份数，纸张大小）。
我努力警告用户，当浏览器打印对话框出现时，他们需要选择“横向”。我还创建了一个“打印预览”页面，它比IE6更好用！我们的应用程序在一些报告中有非常广泛的数据表，并且当表格从纸张的右边缘溢出时，打印预览使用户清楚（因为IE6无法应对2张纸上的打印）。
是的，人们现在仍在使用IE6。
答案 13 :(得分：0)
这对我也很有用：
@media print and (orientation:landscape) { … }
答案 14 :(得分：0)
我尝试了丹尼斯（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>
答案 15 :(得分：-1)
您可以尝试以下操作：
@page {
size: auto
}
答案 16 :(得分：-1)
如果要在打印以及打印之前在屏幕上看到风景，则可以在CSS中将宽度设置为900px，将高度设置为612px。
OP没有提到A4尺寸。我假设上面的数字是字母大小。