https://stackoverflow.com/questions/138422
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我有一份HTML报告，由于列数众多，因此需要打印横向报告。有没有办法在不需要用户更改文档设置的情况下执行此操作？
浏览器有哪些选择。
解决方案
在CSS中，您可以设置@page属性，如下所示。
@media print{@page {size: landscape}}
@page是 CSS 2.1规范的一部分是@Page {size}问题的答案未突出显示 size ：landscape}过时了？：
CSS 2.1不再指定size属性。目前的工作 CSS3分页媒体模块的草稿确实指定了它（但事实并非如此） 标准或接受）。
如上所述，尺寸选项来自 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，然后允许用户打开并打印它。
其他提示
我的解决方案：
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
这适用于 IE ， Firefox 和 Chrome
@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）但它确实如此 不宜依赖用户拥有 这个设施或切换它 上。
尝试添加这个CSS：
@page {
size: landscape;
}
您可以使用 CSS 2 @page规则您要将'尺寸'属性设置为横向。
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文档
仅仅旋转页面内容是不够的。这是一个适用于大多数浏览器的正确CSS（Chrome，Firefox，IE9 +）。
首先将body 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（旋转= 3）。但对于现代化的浏览器，它不是必需的。
您还可以使用非标准的IE-only css属性写入模式
div.page {
writing-mode: tb-rl;
}
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
无法在Firefox 16.0.2中运行，但它在Chrome中正常运行
我尝试过一次解决这个问题，但我所有的研究都让我走向了ActiveX控件/插件。浏览器（3年前无论如何）都不允许更改任何打印设置（份数，纸张大小）。
我努力警告用户他们需要选择“风景”。当浏览器打印对话框出现时。我还创建了一个“打印预览”。页面，比IE6的效果要好得多！我们的应用程序在某些报告中有非常广泛的数据表格，当表格从纸张的右边缘溢出时，打印预览使用户清楚（因为IE6无法应对2张纸上的打印）。
是的，人们现在仍在使用IE6。
<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。
我创建了一个带有横向设置的空白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上测试。
这对我也很有用：
@media print and (orientation:landscape) { … }
