从 HTML 横向打印答案

【问题标题】：Landscape printing from HTML从 HTML 横向打印
【发布时间】：2010-09-13 09:32:40
【问题描述】：

我有一个 HTML 报告，由于列数很多，需要横向打印。有没有一种方法可以做到这一点，而无需用户更改文档设置？

浏览器之间有哪些选择。

【问题讨论】：

标签： html css printing

【解决方案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。仍然会添加页眉和页脚，就好像页面是纵向的一样。