logo标签列表

从HTML进行横向打印

htmlcssprinting
306

我有一个HTML报告，由于有很多列，需要横向打印。有没有一种方法可以在不让用户更改文档设置的情况下实现？

在各种浏览器中有哪些选项可供选择。

18个回答
476

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

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

@page是CSS 2.1规范的一部分，但是这个size并不像回答@Page { size:landscape}是否过时？中所强调的那样:

CSS 2.1不再指定大小属性。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并允许用户打开和打印的原因。
37
“size”写成“landscape”有些奇怪，因为实际上这应该是指“方向（orientation）”。 - Magnus Smith
1
“@page size” 在所有现代浏览器中似乎都不起作用，只有 Firefox 有效。就我所见，Chrome 和 Opera 都忽略了它。 - Justin808
2
“size: landscape” 不是 CSS2.1 的一部分，尽管 @page 规则是。但它是 CSS3 的一部分。要确认，请尝试使用 W3C CSS 验证器，并输入 “@page {size: landscape}”，并将“Profile”设置为级别 2.1 和级别 3，然后比较结果。 - daiscog
1
当您有一个占据页面100%宽度或高度的div时，旋转不会使div占用纵向页面的空间，而是占用横向页面旋转后的空间。因此，div的某些部分将超出页面范围。 - Oliver
8
说实话，关于CSS，在IE中真正起作用的是什么呢 ;) - Tony
显示剩余8条评论
43

我的解决方案：

<style type="text/css" media="print">
    @page { 
        size: landscape;
    }
    body { 
        writing-mode: tb-rl;
    }
</style>
  • 使用media="print"只在打印时应用。
  • 这在IE、Firefox和Chrome中都有效。
1
如果我只想让某个 class 的 div 横向显示而不是整个页面怎么办？ - SearchForKnowledge
2
@寻找知识 - 这将是CSS3的transform: rotate(90度)。 - ToolmakerSteve
不明白我做错了什么，但这会在Chrome中破坏整个页面。这是我从代码中复制的那一行： @media print{@page {size: portrait;} body {writing-mode: tb-rl;}} - X-HuMan
1
在2018年，它仍然可以与标准的Web浏览器组件完美配合使用。谢谢。 - Ken Bekov
以下代码适用于混合方向，即纵向和横向（无需为纵向编写CSS）： @media print { table.landscape { writing-mode: tb-rl; margin-top: 0.5mm; border-collapse: collapse; }
} - Sanjay Kumar
显示剩余2条评论
22

size 属性是你需要的属性，就像之前提到的那样。如果想在打印时设置页面的方向和大小，可以使用以下代码：

@media print { body { size: [横向长度] [纵向长度]; orientation: [方向]; } }
/* ISO Paper Size */
@page {
  size: A4 landscape;
}

/* Size in mm */    
@page {
  size: 100mm 200mm landscape;
}

/* Size in inches */    
@page {
  size: 4in 6in landscape;
}

这是一个链接到 @page 文档的链接。

当与Bootstrap一起使用时，此声明必须存储到单独的.css文件中，否则如果它是内联的，则默认的Bootstrap声明(size: a3)将优先。 - caram
18

仅仅旋转页面内容是不够的。这里是一份适用于大多数浏览器（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纸的尺寸为210毫米 x 297毫米。您需要从尺寸中减去打印边距。并设置页面内容的大小：

div.portrait {
  width: 190mm;
  height: 276mm;
}
div.landscape {
  width: 276mm;
  height: 190mm;
}
我使用276毫米而不是277毫米，因为不同的浏览器会稍微以不同的比例缩放页面。 因此，其中一些浏览器将把高度为277毫米的内容打印在两个页面上。 第二页将为空白。 使用276毫米更加安全。
我们不需要任何打印页面上的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>
有人在IE 11上成功了吗？似乎所有元素都没有对齐。 - mzonerz
1
@mzonerz 我刚在IE 11中进行了测试，它可以正常工作。我在答案的末尾添加了一个测试HTML。请注意，在打印设置中应将页面边距设置为10mm。如果您需要不同的页面边距，则必须更新以下值：padding: 10mm; width: 190mm; height: 190mm; - Denis
@Denis 谢谢你的努力。实际上这是目前为止唯一有效的解决方案。不错！那些在SharePoint Intranet网站中集成此解决方案的人可能需要关闭兼容性视图设置。 - mzonerz
我正在使用横向打印到PDF，我必须将“MS Print to PDF”打印机设置为“横向”，并交换div.portrait和div.landscape的width和height。否则效果非常好！ - caram
1
景观机制 https://codepen.io/04/full/mdBZqvM - 井上智文
显示剩余2条评论
14

尝试将以下内容添加到您的CSS中：

@page {
  size: landscape;
}
3
这个方法对你使用的任何浏览器都起作用了吗？在IE8和Firefox3.5中，它似乎对打印预览没有任何影响。 - Daniel Ballinger
打印预览不遵循所有CSS属性，不幸的是。但这应该在所有当前浏览器中都可以工作。 - gizmo
谢谢您跟进这个问题。在实际打印中，似乎对我也不起作用。我错过了什么吗？我的测试文件如下：（我不得不截短段落内容以适合评论框）<html> <head> <title>横向测试页面</title> <style> @Page { size: landscape; } </style> </head> <body> <p> Lorem ipsum dolor sit amet, ... </p> </body> </html> - Daniel Ballinger
我已经尝试了这个页面上显示的@Page规则的每种组合，以及其他网站上的一些规则，还有O'Reilly的HTML/XHTML: The Definitive Guide, Fifth Edition中的示例。但我无法在IE8、Firefox 3.6或Chrome 7.0中使其正常工作。 - Paul Keister
我知道现在已经是2012年了...但这个答案帮助了我...为了支持IE8的横向选项...谢谢 - Vikram
在2022年，这在Chrome和Microsoft Edge中运行得非常好。只需将其添加到自己的StyleSheet中，并将<link rel="stylesheet" href="css/PrintInLandscapeStyle.css" media="print" />添加到需要横向打印（表格等）的任何页面的头部即可。 - FlashTrev
13

摘自CSS-Discuss Wiki

@page规则从CSS2降级到了CSS2.1。据报道，只有Opera浏览器完整支持CSS2的@page规则，即使那样也存在错误。我的测试显示，IE和Firefox根本不支持@page规则。根据现已过时的CSS2规范第13.2.2节，可以覆盖用户的方向设置（例如）强制横向打印，但相关的“size”属性已从CSS2.1中删除，这与当前浏览器都不支持它的事实一致。在CSS3分页媒体模块中重新引入了此规则，但请注意，这仅是工作草案（截至2009年7月）。

结论：目前先忘记@page规则吧。如果您认为必须以横向方式打印文档，请考虑是否可以使您的设计更加流畅。如果您真的无法做到这一点（例如文档包含许多列的数据表），则需要建议用户将方向设置为横向，并可能概述如何在最常见的浏览器中进行设置。当然，一些浏览器具有适合宽度（缩小到适合）功能（例如Opera，Firefox，IE7），但不建议依赖用户拥有此功能或已开启此功能。

4
那是“CSS-Discuss Wiki”，不是“维基百科”。 - jball
8
5

你还可以使用非标准的仅限IE的css属性writing-mode

。
div.page    { 
   writing-mode: tb-rl;
}
1
这确实重新定位页面内容，但实际上并没有改变页面布局为横向。即页眉和页脚仍将被添加，就像页面是纵向的一样。 - Daniel Ballinger
4

我尝试了丹尼斯的建议，但是遇到了一些问题（在横向页面之后，纵向页面无法正常打印），所以这里是我的解决方案：

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>

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上进行测试。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接