从HTML横向打印

我有一个HTML报告,由于列数很多,需要打印出来.它有一种方法可以做到这一点,而无需用户更改文档设置？

浏览器有哪些选择？

在CSS中,您可以设置@page属性,如下所示.

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

@page是CSS 2.1规范的一部分,但size问题的答案并未突出显示问题是@Page {size:landscape}已过时？:

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

如上所述,size选项来自CSS 3草案规范.从理论上讲,它可以设置为页面大小和方向,但在我的示例中,省略了大小.

支持与firefox中提交的错误报告混合在一起,大多数浏览器都不支持它.

它似乎可以在IE7中工作,但这是因为IE7会记住用户在打印预览中最后选择的横向或纵向(仅重新启动浏览器).

本文确实有一些使用JavaScript或ActiveX向用户浏览器发送密钥的建议工作,尽管它们并不理想,并且依赖于更改浏览器安全设置.

或者,您可以旋转内容而不是页面方向.这可以通过创建样式并将其应用于包含这两行的主体来完成,但这也有回退创建许多对齐和布局问题.

我找到的最后一个选择是在PDF中创建横向版本.您可以指向用户选择打印时打印PDF.但是我无法在IE7中进行自动打印工作.

总而言之,在某些浏览器中,使用@page大小选项很容易实现相对性,但在许多浏览器中,没有确定的方法,这取决于您的内容和环境.这可能是Google文档在选择打印时创建PDF然后允许用户打开并打印PDF的原因.

我的解决方案

这适用于IE,Firefox和Chrome

引自CSS-Discuss Wiki

@page规则已从CSS2缩减到CSS2.1.据报道,完整的CSS2 @page规则仅在Opera中实现(即便如此,也是如此).我自己的测试显示IE和Firefox根本不支持@page.根据现在过时的CSS2规范部分13.2.2,可以覆盖用户的方向设置和(例如)强制打印横向,但相关的"尺寸"属性已从CSS2.1中删除,与事实一致目前没有浏览器支持它.它已在CSS3分页媒体模块中恢复,但请注意,这只是一个工作草案(截至2009年7月).

结论:忘记现在的@page.如果您觉得您的文档需要以横向打印,请问您自己是否可以使您的设计更加流畅.如果你真的不能(例如,因为该文档包含具有许多列的数据表),您将需要建议用户将方向设置为Landscape,并可能概述如何在最常见的浏览器中执行此操作.当然,有些浏览器具有适合宽度(缩小到适合)的打印功能(例如Opera,Firefox,IE7),但是不建议依赖具有此功能或打开它的用户.

尝试添加这个CSS:

@page {
  size: landscape;
}

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

首先将主体设置margin为0，因为否则页边距将大于在打印对话框中设置的页边距。还要设置background颜色以使页面可视化。

body {
  margin: 0;
  background: #CCCCCC;
}

margin，border并且background是可视化页面所必需的。

padding必须设置为所需的打印边距。在打印对话框中，您必须设置相同的边距（在此示例中为10mm）。

div.portrait, div.landscape {
  margin: 10px auto;
  padding: 10mm;
  border: solid 1px black;
  overflow: hidden;
  page-break-after: always;
  background: white;
}

A4页面的尺寸为210mm x 297mm。您需要从尺寸中减去打印边距。并设置页面内容的大小：

div.portrait {
  width: 190mm;
  height: 276mm;
}
div.landscape {
  width: 276mm;
  height: 190mm;
}

我使用276mm而不是277mm，因为不同的浏览器对页面的缩放略有不同。因此，其中一些将在两页上打印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！此外，横向页​​面的内容必须向下移动276mm！

另外，如果您同时使用纵向和横向页面，IE会缩小页面。我们通过将其设置-ms-zoom为1.665来修复它。如果将其设置为1.6666或类似的内容，有时页面内容的右边框可能会被裁剪。

如果您需要IE8-或其他旧的浏览器支持，您可以使用-webkit-transform，-moz-transform，filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)。但是对于足够现代的浏览器来说，则不是必需的。

这是一个测试页：

  
    
    
  
  
    
A portrait page
    
A landscape page
  

您可以使用CSS 2 @page规则,该规则允许您将"size"属性设置为landscape.

如上所述,该size物业就是您所追求的.要在打印时设置页面的方向和大小,可以使用以下内容:

/* ISO Paper Size */
@page {
  size: A4 landscape;
}

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

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

div.page    { 
   writing-mode: tb-rl;
}