html - 我想用 css 或 javascript 编写 HTML，这样我就可以纵向打印第 1 页，横向打印第 2、3、.. 页

Question

有没有其他方法可以达到这个要求。

我正在使用 filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=3);旋转有效的页面，但如果内容很长，则无法正确打印页面。

Answer 1

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

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

@page 是 CSS 2.1 specification 的一部分然而，这个size 并没有像Is @Page { size:landscape} obsolete? 问题的答案那样突出显示。 :

CSS 2.1 no longer specifies the size attribute. The current working draft for CSS3 Paged Media module does specify it (but this is not standard or accepted).

如前所述，尺寸选项来自 CSS 3 Draft Specification .理论上它可以设置为页面大小和方向，尽管在我的示例中省略了大小。

支持非常复杂 bug report begin filed in firefox , 大多数浏览器不支持它。

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

This article确实有一些使用 JavaScript 或 ActiveX 将 key 发送到用户浏览器的建议解决方法，尽管它们并不理想并且依赖于更改浏览器的安全设置。

或者，您可以旋转内容而不是页面方向。这可以通过创建样式并将其应用于包含这两行的正文来完成，但这也有缺点，会产生许多对齐和布局问题。

<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 选项相对容易，但在许多浏览器中没有确定的方法，这取决于您的内容和环境。这可能就是为什么 Google 文档会在选择打印时创建一个 PDF，然后允许用户打开并打印它。