从 HTML 横向打印
Posted
技术标签:
【中文标题】从 HTML 横向打印【英文标题】：Landscape printing from HTML 【发布时间】：2010-09-13 09:32:40 【问题描述】：我有一个 html 报告，由于列数很多，需要横向打印。有没有一种方法可以做到这一点，而无需用户更改文档设置？
浏览器之间有哪些选择。
【问题讨论】：
【参考方案1】：我遇到的问题可能和你一样。这里的每个人都使用 CSS 来静态提供它，但我不得不寻找一个动态的解决方案，以便它可以根据活动元素进行更改而无需重新加载页面..
我创建了 2 个文件，portrait.css 和 Landscape.css。
portrait.css 是空白的，而landscape.css 是一行。
@media print@page size: landscape
在我的主文件中，我添加了这行 html 以将 Portrait.css 指定为默认值。
<link rel="stylesheet" id="PRINTLAYOUT" href="portrait.css" type="text/css" /></link>
现在，要切换，您只需更改元素中的 href 即可切换打印模式。
$("#PRINTLAYOUT").attr("href","landscape.css")
// OR
document.getElementById("PRINTLAYOUT").href = "landscape.css" // I think...
这对我很有用，我希望它可以帮助其他人像我一样艰难地做事。请注意，$ 代表 JQuery。如果您还没有使用它，我强烈建议您现在开始。
【讨论】：
【参考方案2】：我的解决方案：
<style type="text/css" media="print">
@page
size: landscape;
body
writing-mode: tb-rl;
</style>
media="print" 仅适用于打印。
这适用于IE、Firefox 和Chrome
【讨论】：
如果我想让某些class div 处于横向而不是整个页面怎么办？
@SearchForKnowledge - 这将是 css3 的变换：rotate(90deg)。
不明白我做错了什么，但这会破坏 chrome 中的整个页面。这是我从代码 @media print@page size: Portrait; body writing-mode: tb-rl; 复制的行
对我来说只添加这个@page size: Landscape; 有效。
在 2018 年仍然可以很好地与标准 WebBrowers 组件配合使用。谢谢。【参考方案3】：
这就是我想出的 - 为<html> 元素添加负旋转，为<body> 添加相等 abs 值的正旋转。这样就不必添加大量 CSS 来设置 body 样式了，而且效果非常棒：
html
transform: rotate(-90deg);
body
transform: rotate(90deg);
【讨论】：
【参考方案4】：我尝试了 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>【讨论】：
【参考方案5】：您可以尝试以下方法：
@page
size: auto
【讨论】：
【参考方案6】：仅仅旋转页面内容是不够的。这是适用于大多数浏览器（Chrome、Firefox、IE9+）的正确 CSS。
首先将正文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 毫米，因为不同的浏览器缩放页面略有不同。所以他们中的一些人会在两页上打印 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！横向页面的内容也必须向下移动 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>
【讨论】：
非常感谢，它就像一个魅力（使用 chrome），网页由横向和纵向模式混合组成。 div.portrait, div.landscape 哪里来的？ 这在 IE 11 中是否适用于任何人？似乎所有的元素都被关闭了。 @mzonerz 我刚刚在 IE 11 中测试过，效果很好。我在答案的末尾添加了一个测试 html。请注意，您应该在打印设置中将页边距设置为 10 毫米。如果您需要不同的页边距，那么您必须更新以下值： padding: 10mm;宽度：190mm；高度：190mm; 景观机制codepen.io/04/full/mdBZqvM【参考方案7】：在您的 CSS 中，您可以设置 @page 属性，如下所示。
@media print@page size: landscape
@page 是CSS 2.1 specification 的一部分，但是这个size 并没有像问题Is @Page size:landscape obsolete? 的答案那样突出显示：
CSS 2.1 不再指定 size 属性。目前的工作 CSS3 Paged Media 模块的草稿确实指定了它（但这不是 标准或接受）。
如上所述，大小选项来自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 size 选项相对容易，但是在许多浏览器中没有确定的方法，这取决于您的内容和环境。 这可能是 Google Documents 在选择打印时创建 PDF 并允许用户打开和打印的原因。
【讨论】：
奇怪的是它说“大小”可以是横向，而实际上它是一个“方向”。@page size 似乎不适用于所有现代浏览器，只有 Firefox。据我所见，Chrome 和 Opera 都无视这一点。
size: landscape NOT 是 CSS2.1 的一部分，尽管 @page 规则是。然而，它是 CSS3 的一部分。如需确认，请尝试使用W3C CSS Validator 并输入@page size: landscape 并将“个人资料”设置为2.1 级和3 级的结果进行比较。
当你有一个占据页面宽度或高度100的div时，旋转不会使div占据纵向页面的空间，而是旋转的横向页面。所以 div 的某些部分会出现在页面之外。
@AbeerSul - 老实说，关于 CSS，在 IE 中的作用是什么 ;)【参考方案8】：
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的链接。
【讨论】：
与 bootstrap 一起使用时，此声明必须存储到单独的.css 文件中，否则如果它是内联的，则默认的 boostrap 声明 (size: a3) 将优先。【参考方案9】：
我创建了一个带有横向设置的空白 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 上测试。
【讨论】：
【参考方案10】：这也对我有用：
@media print and (orientation:landscape) …
【讨论】：
你在哪些浏览器中测试过？【参考方案11】：尝试将此添加到您的 CSS：
@page
size: landscape;
【讨论】：
这对任何浏览器都有效吗？使用 IE8 和 Firefox3.5 似乎对打印预览没有任何影响。 很遗憾，打印预览并不遵循所有的 CSS 属性。但这应该适用于所有当前的浏览器。 感谢您跟进此事。它似乎对我来说也不适用于实际打印。我错过了什么吗？我的测试文件如下：（我不得不截断段落内容以适应评论框）Lorem ipsum dolor sit amet, ...
我已经尝试了此页面上显示的 @Page 规则和其他站点中的一些规则的所有组合，以及 O'Reilly 的 HTML/XHTML：权威指南，第五版中的示例。我无法让它在 IE8、Firefox 3.6 或 Chrome 7.0 中运行。 我知道它的 2012 年......但这个答案帮助了我......支持 IE8 的横向选项......谢谢【参考方案12】：-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
在 Firefox 16.0.2 中不工作，但在 Chrome 中工作
【讨论】：
【参考方案13】：<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 标签中添加 table 标签并在最后关闭 div 标签。
此表格将仅以横向模式打印，所有其他页面将仅以纵向模式打印。但问题是如果表格大小大于页面宽度，那么我们可能会丢失一些行，有时还会丢失标题。小心点。
祝你有美好的一天。
谢谢你， Naveen Mettapally。
【讨论】：
这会将屏幕内容旋转 90 度，但打印输出仍以纵向格式输出。至少在 ie8 中确实是两全其美。【参考方案14】：引自CSS-Discuss Wiki
@page 规则已在 范围从 CSS2 到 CSS2.1。完整的 据报道 CSS2 @page 规则 仅在 Opera 中实现（并且错误地 即使这样）。我自己的测试表明 IE 和 Firefox 不支持@page at 全部。根据现在过时的 CSS2 规范第 13.2.2 节是 可以覆盖用户的 方向设置和（对于 示例）在横向强制打印 但相关的“大小”属性有 已从 CSS2.1 中删除，一致 事实上，没有当前的浏览器 支持它。它已在 CSS3 Paged Media 模块，但请注意 这只是一个工作草案（如 2009 年 7 月）。
结论：忘记 关于目前的@page。如果你 觉得您的文件需要打印 在横向，问问自己 如果你可以做你的设计 更流畅。如果你真的做不到 （可能是因为文档包含 具有许多列的数据表，例如 例），您需要告知 用户将方向设置为 景观，也许概述如何 在最常见的浏览器中执行此操作。的 当然，有些浏览器有打印 适合宽度（缩小以适合）功能 （例如 Opera、Firefox、IE7）但它是 不建议依赖用户拥有 该设施或已切换 开。
【讨论】：
这是“CSS-Discuss Wiki”，而不是“Wikipedia”。【参考方案15】：我曾经试图解决这个问题，但我所有的研究都将我引向了 ActiveX 控件/插件。浏览器（无论如何是 3 年前）允许更改任何打印设置（份数、纸张大小）没有任何技巧。
我努力警告用户，当浏览器打印对话框出现时，他们需要选择“横向”。我还创建了一个“打印预览”页面，它比 IE6 的效果要好得多！我们的应用程序在某些报告中包含非常宽的数据表，并且打印预览让用户清楚地知道表格何时会溢出纸张的右边缘（因为 IE6 也无法处理在 2 张纸上打印）。
是的，现在人们仍在使用 IE6。
【讨论】：
【参考方案16】：您也许可以使用CSS 2 @page rule，它允许您设置'size' property to landscape。
【讨论】：
【参考方案17】：你也可以使用非标准的 IE-only css 属性writing-mode
div.page
writing-mode: tb-rl;
【讨论】：
这会重新定位页面内容，但不会真正将页面布局更改为横向。 IE。仍然会添加页眉和页脚，就好像页面是纵向的一样。以上是关于从 HTML 横向打印的主要内容，如果未能解决你的问题，请参考以下文章