从HTML进行横向打印

您可以尝试以下方法：

@page {
    size: auto
}

这也为我工作：

@media print and (orientation:landscape) { … }

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

在Firefox 16.0.2中无法运行，但在Chrome中可以运行

我尝试了Denis的答案并遇到了一些问题（在使用横向页面后，纵向页面无法正确打印），所以这是我的解决方案：

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>

<style type="text/css" media="print">
.landscape { 
    width: 100%; 
    height: 100%; 
    margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1); 
} 
</style>

如果要将此样式应用于表，请使用此样式类创建一个div标签，然后在该div标签内添加表格标签，并在最后关闭div标签。

该表仅以横向打印，所有其他页面仅以纵向模式打印。但是问题是，如果表大小大于页面宽度，那么我们可能会丢失一些行，有时还会丢失标题。小心。

祝你有美好的一天。

谢谢Naveen Mettapally。

我曾经尝试解决此问题，但是我的所有研究都使我转向ActiveX控件/插件。没有任何技巧可以阻止浏览器（无论如何还是3年前）更改任何打印设置（份数，纸张尺寸）。

我尽力警告用户，当浏览器的打印对话框出现时，他们需要选择“横向”。我还创建了一个“打印预览”页面，该页面比IE6的效果要好得多！我们的应用程序在某些报告中具有非常宽的数据表，并且当表会从纸张的右边缘溢出时（因为IE6也无法处理2张纸），打印预览可以使用户清楚地知道。

是的，即使现在，人们仍在使用IE6。

我使用“横向”设置创建了一个空白的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测试。

您还可以使用非标准的IE-only css属性写入模式

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

引自CSS-Discuss Wiki

@page规则的范围从CSS2减少到CSS2.1。据说完整的CSS2 @page规则仅在Opera中实现（即使在那时也是如此）。我自己的测试表明，IE和Firefox根本不支持@page。根据现已过时的CSS2规范第13.2.2节，可以覆盖用户的方向设置并（例如）在“横向”中强制打印，但是相关的“ size”属性已从CSS2.1中删除，这与事实相符当前没有浏览器支持。它已在CSS3 Paged Media模块中恢复，但请注意，这只是一个工作草案（截至2009年7月）。

结论：暂时不要使用@page。如果您认为文档需要横向打印，请问问自己是否可以使设计更流畅。如果确实不能这样做（例如，可能是因为文档包含具有许多列的数据表），则需要建议用户将方向设置为“横向”，并概述在最常见的浏览器中的操作方式。当然，某些浏览器具有按比例打印（按比例缩小）功能（例如Opera，Firefox，IE7），但建议不要依赖具有此功能或已打开电源的用户。

我的解决方案：

<style type="text/css" media="print">
    @page { 
        size: landscape;
    }
    body { 
        writing-mode: tb-rl;
    }
</style>

这部作品在IE，Firefox和Chrome

该size物业是你提到后在做什么。要在打印时设置页面的方向和尺寸，可以使用以下方法：

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

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

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

这是@page文档的链接。

尝试将其添加到您的CSS中：

@page {
  size: landscape;
}

在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 Draft Specification。从理论上讲，可以将其设置为页面大小和方向，尽管在我的示例中省略了页面大小。

The support is very mixed with a bug report begin filed in firefox, most browsers do not support it.

It may seem to work in IE7 but this is because IE7 will remember the users last selection of landscape or portrait in print preview (only the browser is re-started).

This article does have some suggested work arounds using JavaScript or ActiveX that send keys to the users browser although it they are not ideal and rely on changing the browsers security settings.

Alternately you could rotate the content rather than the page orientation. This can be done by creating a style and applying it to the body that includes these two lines but this also has draw backs creating many alignment and layout issues.

<style type="text/css" media="print">
    .page
    {
     -webkit-transform: rotate(-90deg); 
     -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
</style>

The final alternative I have found is to create a landscape version in a PDF. You can point to so when the user selects print it prints the PDF. However I could not get this to auto print work in IE7.

<link media="print" rel="Alternate" href="print.pdf">

In conclusion in some browsers it is relativity easy using the @page size option however in many browsers there is no sure way and it would depend on your content and environment. This maybe why Google Documents creates a PDF when print is selected and then allows the user to open and print that.