用于打印HTML的不同页面方向代码：_Html_Css

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

html css

用于打印HTML的不同页面方向代码：,html,css,Html,Css,我尝试使用以下简单的HTML页面： <html> <head> <style type="text/css"> @media print { @page port { size: portrait; } .portrait { page: port; } @page land { size: landscape; } .landscape {

我尝试使用以下简单的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>


@媒体印刷品
{               
@页面端口{大小：纵向；}
.trait{page:port；}
@页面区域{大小：景观；}
.景观{第页：土地；}
.break{之前的分页符：始终；}
}
这是一个横向页面
这是一个肖像页

问题:

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

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

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

目前没有其他简单的方法可以做到这一点，因为

size

CSS指令仅由一个浏览器（Opera）实现，但它仍然是当前草案的一部分（对于弃用，对于规范）

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

不再使用

size

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

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

当您可以依赖navigator功能时，依赖插件绝非明智之举。使用IE6以后提供的代码I（通过使用

过滤器

）本机支持旋转。另外，如果他使用的是媒体查询，那么他就不会使用IE5.5。如果你想要打印的页面中有复杂的逻辑，那么生成PDF就不那么容易了。若你们有PHP环境，你们也并没有太多的选择。此外，如果不需要实际文件，为什么要生成PDF？您只需要打印页面，这可能是合理的，但如果您的报告中有多个页面，则必须添加上边距，因为使用变换的旋转将从元素的中心开始，而不是从右上角开始，这很好：）@povilasp:position:absolute除了一个rot之外，没有什么可以阻止你使用

position:absolute

来抵消它40%的影响。@povilasp:刚检查过，很快就会用小提琴更新我的答案，这样可能会更容易。请注意，它有严格的假设，但是。。。实际上，这比生成PDF还要容易。只是想到了一种方法-结合画布和旋转黑客。好的，你的回答证实了我的想法。你的破解非常有趣，而且确实有效，但是在打印中它将是一个肖像页。我的意思是，浏览器将页眉和页脚放在页面的顶部和底部（如果是横向文档，则放在左侧和右侧）。