279

我有一个 HTML 报告，由于列多，需要横向打印。有没有办法做到这一点，而用户不必更改文档设置？

浏览器中有哪些选项。

4

17 回答 17

444

在您的 CSS 中，您可以设置 @page 属性，如下所示。

@media print{@page {size: landscape}}

@page 是CSS 2.1 规范的一部分，但这size并没有像问题的答案所强调的那样@Page { size:landscape} 已过时？：

CSS 2.1 不再指定 size 属性。CSS3 Paged Media 模块的当前工作草案确实指定了它（但这不是标准或被接受的）。

如前所述，尺寸选项来自CSS 3 Draft Specification。理论上，它可以设置为页面大小和方向，尽管在我的示例中省略了大小。

该支持与在 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 size 选项相对容易，但是在许多浏览器中没有确定的方法，这取决于您的内容和环境。这可能是 Google Documents 在选择打印时创建 PDF 并允许用户打开并打印的原因。

于 2009-09-08T08:50:50.727 回答
38

我的解决方案：

<style type="text/css" media="print">
    @page { 
        size: landscape;
    }
    body { 
        writing-mode: tb-rl;
    }
</style>
  • media="print"仅适用于打印。
  • 这适用于IE,Firefox和Chrome
于 2014-09-24T20:21:09.063 回答
17

如前所述，该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 文档的链接。

于 2017-02-20T12:20:57.310 回答
16

仅仅旋转页面内容是不够的。这是适用于大多数浏览器（Chrome、Firefox、IE9+）的正确 CSS。

首先将 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 页面尺寸为 210 毫米 x 297 毫米。您需要从尺寸中减去打印边距。并设置页面内容的大小：

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>
于 2017-05-19T12:13:16.583 回答
13

引用自CSS-Discuss Wiki

@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），但不建议依赖拥有此功能或将其打开的用户。

于 2010-12-27T16:51:55.877 回答
12

尝试将此添加到您的 CSS：

@page {
  size: landscape;
}
于 2008-09-26T09:35:56.377 回答
8

您也许可以使用CSS 2 @page 规则，该规则允许您将'size' 属性设置为 Landscape。

于 2008-09-26T09:33:47.943 回答
5

您还可以使用非标准的 IE-only css 属性writing-mode

div.page    { 
   writing-mode: tb-rl;
}
于 2008-09-26T09:28:55.443 回答
3

我创建了一个带有横向设置的空白 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 上测试。

于 2015-01-05T20:06:39.183 回答
3

我尝试了丹尼斯的回答并遇到了一些问题（在横向页面之后没有正确打印纵向页面），所以这是我的解决方案：

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>

于 2019-11-27T13:32:34.270 回答
2

这就是我想出的 - 为<html>元素添加负旋转和相等 abs 值的正旋转<body>。这样就不必添加大量的 CSS 来设置正文样式，而且它的作用就像一个魅力：

html { 
  transform: rotate(-90deg);
}

body { 
  transform: rotate(90deg);
}
于 2021-05-02T19:23:28.930 回答
1

我曾经试图解决这个问题，但我所有的研究都把我引向了 ActiveX 控件/插件。浏览器（无论如何是 3 年前）允许更改任何打印设置（份数、纸张大小）没有任何技巧。

我努力警告用户，当浏览器打印对话框出现时，他们需要选择“横向”。我还创建了一个“打印预览”页面，它比 IE6 的效果要好得多！我们的应用程序在一些报告中有非常宽的数据表，打印预览让用户清楚地知道表格何时会溢出纸张的右边缘（因为 IE6 也无法处理在 2 张纸上打印）。

是的，即使现在人们仍在使用 IE6。

于 2009-11-10T16:24:28.770 回答
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 标签中添加 table 标签并在最后关闭 div 标签。

此表格将仅以横向模式打印，所有其他页面将仅以纵向模式打印。但问题是如果表格大小超过页面宽度，那么我们可能会丢失一些行，有时还会丢失标题。当心。

祝你有美好的一天。

谢谢你，纳文·梅塔帕利。

于 2010-06-18T09:24:57.460 回答
1 
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

无法在 Firefox 16.0.2 中运行，但在 Chrome 中运行

于 2012-11-24T13:15:17.587 回答
1

这也对我有用：

@media print and (orientation:landscape) { … }
于 2014-07-25T07:15:17.427 回答
0

我遇到的问题可能和你一样。这里的每个人都使用 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。如果您还没有使用它，我强烈建议您现在开始。

于 2021-09-05T23:30:20.010 回答
-1

您可以尝试以下方法：

@page {
    size: auto
}
于 2019-11-06T10:03:49.273 回答