从 HTML 横向打印
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/138422/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Landscape printing from HTML
提问by doekman
I have a HTML report, which needs to be printed landscape because of the many columns. It there a way to do this, without the user having to change the document settings?
我有一个 HTML 报告，由于列很多，因此需要横向打印。有没有办法做到这一点，而无需用户更改文档设置？
And what are the options amongst browsers.
浏览器之间有哪些选项。
回答by John
In your CSS you can set the @page property as shown below.
在您的 CSS 中，您可以设置 @page 属性，如下所示。
@media print{@page {size: landscape}}
The @page is part of CSS 2.1 specificationhowever this sizeis not as highlighted by the answer to the question Is @Page { size:landscape} obsolete?:
@page 是CSS 2.1 规范的一部分，但这size并没有在问题@Page { size:landscape} 过时吗？：
CSS 2.1 no longer specifies the size attribute. The current working draft for CSS3 Paged Media module does specify it (but this is not standard or accepted).
CSS 2.1 不再指定 size 属性。CSS3 Paged Media 模块的当前工作草案确实指定了它（但这不是标准的或被接受的）。
As stated the size option comes from the CSS 3 Draft Specification. In theory it can be set to both a page size and orientation although in my sample the size is omitted.
如前所述，大小选项来自CSS 3 Draft Specification。理论上它可以设置为页面大小和方向，尽管在我的示例中省略了大小。
The support is very mixed with a bug report begin filed in firefox, most browsers do not support it.
该支持与在 firefox 中开始提交的错误报告混合在一起，大多数浏览器不支持它。
It may seem to work in IE7 but this is because IE7 will remember the users last selection of landscape or portrait in print preview (only the browser is re-started).
它可能在 IE7 中工作，但这是因为 IE7 会记住用户在打印预览中最后选择的横向或纵向（仅重新启动浏览器）。
This articledoes have some suggested work arounds using JavaScript or ActiveX that send keys to the users browser although it they are not ideal and rely on changing the browsers security settings.
本文确实有一些建议的解决方法，使用 JavaScript 或 ActiveX 将密钥发送到用户浏览器，尽管它们并不理想并且依赖于更改浏览器的安全设置。
Alternately you could rotate the content rather than the page orientation. This can be done by creating a style and applying it to the body that includes these two lines but this also has draw backs creating many alignment and layout issues.
或者，您可以旋转内容而不是页面方向。这可以通过创建一个样式并将其应用于包含这两条线的主体来完成，但这也有缺点，会产生许多对齐和布局问题。
<style type="text/css" media="print">
.page
{
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
The final alternative I have found is to create a landscape version in a PDF. You can point to so when the user selects print it prints the PDF. However I could not get this to auto print work in IE7.
我发现的最后一个选择是在 PDF 中创建横向版本。您可以指出，当用户选择打印时，它会打印 PDF。但是我无法在 IE7 中自动打印工作。
<link media="print" rel="Alternate" href="print.pdf">
In conclusion in some browsers it is relativity easy using the @page size option however in many browsers there is no sure way and it would depend on your content and environment. This maybe why Google Documents creates a PDF when print is selected and then allows the user to open and print that.
总之，在某些浏览器中，使用 @page size 选项相对容易，但是在许多浏览器中没有确定的方法，这取决于您的内容和环境。这可能是为什么 Google Documents 在选择打印时会创建一个 PDF，然后允许用户打开和打印它的原因。
回答by Eduardo Cuomo
My solution:
我的解决方案：
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
This works in IE, Firefoxand Chrome
这适用于IE，Firefox并且Chrome
回答by Denis
It's not enough just to rotate the page content. Here is a right CSS which work in the most browsers (Chrome, Firefox, IE9+).
仅仅旋转页面内容是不够的。这是一个适用于大多数浏览器（Chrome、Firefox、IE9+）的正确 CSS。
First set body marginto 0, because otherwise page margins will be larger than those you set in the print dialog. Also set backgroundcolor to visualize pages.
首先将 body 设置margin为 0，否则页边距将大于您在打印对话框中设置的页边距。还可以设置background颜色以可视化页面。
body {
margin: 0;
background: #CCCCCC;
}
margin, borderand backgroundare required to visualize pages.
margin，border并且background需要可视化页面。
paddingmust be set to the required print margin. In the print dialog you must set the same margins (10mm in this example).
padding必须设置为所需的打印边距。在打印对话框中，您必须设置相同的边距（在本例中为 10mm）。
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}
The size of A4 page is 210mm x 297mm. You need to subtract print margins from the size. And set the size of page's content:
A4 页面的尺寸为 210 毫米 x 297 毫米。您需要从尺寸中减去打印边距。并设置页面内容的大小：
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}
I use 276mm instead of 277mm, because different browsers scale pages a little bit differently. So some of them will print 277mm-height content on two pages. The second page will be empty. It's more safe to use 276mm.
我使用 276 毫米而不是 277 毫米，因为不同的浏览器缩放页面的方式略有不同。所以他们中的一些人会在两页上打印 277 毫米高的内容。第二页将是空的。使用276mm更安全。
We don't need any margin, border, padding, backgroundon the printed page, so remove them:
我们不需要任何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;
}
}
Note that the origin of transformation is 0 0! Also the content of landscape pages must be moved 276mm down!
请注意，转换的起源是0 0！此外，横向页面的内容必须向下移动 276 毫米！
Also if you have a mix of portrait and lanscape pages IE will zoom out the pages. We fix it by setting -ms-zoomto 1.665. If you'll set it to 1.6666 or something like this the right border of the page content may be cropped sometimes.
此外，如果您混合使用纵向和横向页面，IE 将缩小页面。我们通过设置-ms-zoom为 1.665 来修复它。如果您将其设置为 1.6666 或类似的值，页面内容的右边框有时可能会被裁剪。
If you need IE8- or other old browsers support you can use -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). But for modern enough browsers it's not required.
如果您需要 IE8- 或其他旧浏览器支持，您可以使用-webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)。但是对于足够现代的浏览器，它不是必需的。
Here is a test page:
这是一个测试页面：
<!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>
回答by Ahmad Alfy
Quoted from CSS-Discuss Wiki
The @page rule has been cut down in scope from CSS2 to CSS2.1. The full CSS2 @page rule was reportedly implemented only in Opera (and buggily even then). My own testing shows that IE and Firefox don't support @page at all. According to the now-obsolescent CSS2 spec section 13.2.2 it is possible to override the user's setting of orientation and (for example) force printing in Landscape but the relevant "size" property has been dropped from CSS2.1, consistent with the fact that no current browser supports it. It has been reinstated in the CSS3 Paged Media module but note that this is only a Working Draft (as at July 2009).
Conclusion: forget about @page for the present. If you feel your document needs to be printed in Landscape orientation, ask yourself if you can instead make your design more fluid. If you really can't (perhaps because the document contains data tables with many columns, for example), you will need to advise the user to set the orientation to Landscape and perhaps outline how to do it in the most common browsers. Of course, some browsers have a print fit-to-width (shrink-to-fit) feature (e.g. Opera, Firefox, IE7) but it's inadvisable to rely on users having this facility or having it switched on.
@page 规则的范围从 CSS2 缩减到 CSS2.1。据报道，完整的 CSS2 @page 规则仅在 Opera 中实现（即使在那时也存在错误）。我自己的测试表明 IE 和 Firefox 根本不支持 @page。根据现已过时的 CSS2 规范第 13.2.2 节，可以覆盖用户的方向设置和（例如）横向强制打印，但相关的“大小”属性已从 CSS2.1 中删除，与事实一致当前没有浏览器支持它。它已在 CSS3 Paged Media 模块中恢复，但请注意，这只是一个工作草案（截至 2009 年 7 月）。
结论：暂时忘记@page。如果您觉得您的文档需要以横向打印，请问您自己是否可以让您的设计更加流畅。如果您真的不能（例如，可能因为文档包含具有许多列的数据表），您将需要建议用户将方向设置为横向，并可能概述如何在最常见的浏览器中执行此操作。当然，某些浏览器具有打印适合宽度（shrink-to-fit）功能（例如 Opera、Firefox、IE7），但不建议依赖拥有此功能或将其打开的用户。
回答by gizmo
Try to add this your CSS:
尝试将此添加到您的 CSS：
@page {
size: landscape;
}
回答by robstarbuck
The sizeproperty is what you're after as mentioned. To set both the the orientation and size of your page when printing, you could use the following:
如上所述，该size财产就是您所追求的。要在打印时设置页面的方向和大小，您可以使用以下命令：
/* ISO Paper Size */
@page {
size: A4 landscape;
}
/* Size in mm */
@page {
size: 100mm 200mm landscape;
}
/* Size in inches */
@page {
size: 4in 6in landscape;
}
Here's a link to the @page documentation.
这是@page 文档的链接。
回答by Ian Oxley
You might be able to use the CSS 2 @page rulewhich allows you to set the 'size' property to landscape.
您也许可以使用CSS 2 @page 规则，它允许您将'size' 属性设置为 Landscape。
回答by yann.kmm
You can also use the non-standard IE-only css attribute writing-mode
您也可以使用非标准的 IE-only css 属性writing-mode
div.page {
writing-mode: tb-rl;
}
回答by Satheesh
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
not working in Firefox 16.0.2 but it is working in Chrome
无法在 Firefox 16.0.2 中运行，但可以在 Chrome 中运行
回答by Shankar
I created a blank MS Document with Landscape setting and then opened it in notepad. Copied and pasted the following to my html page
我用横向设置创建了一个空白的 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>
The print preview shows the pages in a landscape size. This seems to be working fine on IE and Chrome, not tested on FF.
打印预览以横向尺寸显示页面。这似乎在 IE 和 Chrome 上运行良好，未在 FF 上测试。
