我的解决方案:

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

With media="print"只适用于print。 这适用于IE, Firefox和Chrome

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

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

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

在Firefox 16.0.2中不能运行，但在Chrome中可以运行

在CSS中，您可以设置如下所示的@page属性。

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

@page是css2.1规范的一部分，但是这个尺寸并没有像回答“@page {size:landscape}过时了吗?：

CSS 2.1不再指定size属性。目前的工作 CSS3页面媒体模块的草案没有指定它(但这不是 标准或接受)。

如上所述，大小选项来自css3草案规范。理论上，它可以设置为页面大小和方向，尽管在我的示例中，大小被省略了。

这种支持与firefox中的bug报告混合在一起，大多数浏览器都不支持它。

它在IE7中似乎可以工作，但这是因为IE7会在打印预览中记住用户上次选择的横屏或竖屏(只有浏览器会重新启动)。

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

或者，您可以旋转内容而不是页面方向。这可以通过创建一个样式并将其应用到包含这两条线的主体上来实现，但这也会产生许多对齐和布局问题。

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

我找到的最后一个替代方案是在PDF中创建一个横向版本。你可以指向，当用户选择打印时，它会打印PDF。然而，我不能让这个自动打印工作在IE7。

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

总之，在一些浏览器中，使用@page size选项相对容易，但在许多浏览器中，没有确定的方法，这将取决于你的内容和环境。 这可能是为什么谷歌文档在选择打印时创建PDF，然后允许用户打开并打印。

我尝试了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>

我面临的问题可能和你一样。这里的每个人都使用CSS来静态地提供它，但我不得不寻找一个动态的解决方案，这样它就会根据活动元素而改变，而无需重新加载页面。

我创建了两个文件，肖像。css和风景。css。

Portrait.css是空的，但是landscape.css只有一行。

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

在我的主文件中，我添加了这一行html来指定portrait.css为默认值。

 <link rel="stylesheet" id="PRINTLAYOUT" href="portrait.css" type="text/css" /></link>

现在，要切换，你只需要改变元素中的href来切换打印模式。

$("#PRINTLAYOUT").attr("href","landscape.css")
  // OR 
document.getElementById("PRINTLAYOUT").href = "landscape.css" // I think...

这对我来说很有效，我希望它能帮助其他人像我一样做艰难的事情。注意，$表示JQuery..如果你还没有使用它，我强烈建议你现在就开始使用。