Question

代码：

我尝试使以下简单的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）都会打印两个纵向页面。我错过了什么或者没有一个浏览器支持这种功能吗？在后一种情况下，是否有任何替代方案可以实现这一结果？

Answer 1

快速而肮脏的黑客攻击是使用CSS3或过滤器旋转90度的div。以下方法可行：

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

目前还没有其他任何方式可以轻松完成此操作，因为size CSS指令仅由一个浏览器（Opera）实现，但仍然是当前草稿的一部分（Is @Page { size:landscape} obsolete?对于弃用，规范为http://www.w3.org/TR/css3-page/#page-size。

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

Answer 2

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

Seéastien提供的旋转解决方案也可以使用，但仅限于支持它的浏览器。

用于打印HTML的不同页面方向

代码：

问题：

2 个答案: