21

代码：

我尝试使以下简单的 HTML 页面工作：

<html>
  <head>
    <style type="text/css">     
    @media print
    {               
      @page port { size: portrait; }
      .portrait { page: port; }

      @page land { size: landscape; }
      .landscape { page: land; }                

      .break { page-break-before: always; }
    }
    </style>
  </head>
  <body>
    <div class="landscape">
      <p>This is a landscape page.</p>
    </div>
    <div class="portrait break">
      <p>This is a portrait page.</p>
    </div>
  </body>
</html>

问题：

我想将第一个 div 的内容打印到第一页，横向，第二个纵向模式。但是，所有浏览器（Chrome、Opera、Safari、IE10）都会打印两个纵向页面。我错过了什么还是没有浏览器支持这种功能？在后一种情况下，是否有任何替代方法可以实现该结果？

4

2 回答 2

7

一个快速而肮脏的技巧是使用 CSS3 或过滤器将原本应处于横向的 div 旋转 90 度。以下将起作用：

-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

目前没有任何其他简单的方法可以做到这一点，因为sizeCSS 指令仅由一个浏览器 (Opera) 实现，但仍然是当前草案的一部分 ( Is @Page { size:landscape} obsolete? for deprecation , http://www.w3.org/TR/css3-page/#page-size用于规范）。

下一个最便宜的 hack 就是我上面提到的：将 HTML 放在肖像上……然后使用 CSS3 旋转 90 度。

于 2013-05-16T19:53:03.650 回答
1

该size属性（不再使用），所以我不会依赖它。最实用的方法是在打印之前在服务器上生成 PDF。

Seéastien 提供的旋转解决方案也可以使用，但只能在支持它的浏览器中使用。

于 2013-05-16T21:58:39.763 回答