从HTML横向打印

#1 楼

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

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

@page是CSS 2.1规范的一部分，但是该size并未如问题@@ {{size：landscape}是否过时？


CSS 2.1不再指定size属性。 CSS3 Paged Media模块的当前工作草案
确实对其进行了指定（但这不是
标准或不被接受）。 CSS 3规范草案。从理论上讲，可以将其设置为页面大小和方向，尽管在我的示例中省略了页面大小。 。

它似乎可以在IE7中使用，但这是因为IE7会记住用户在打印预览中最后选择的风景或肖像（仅重新启动浏览器）。 >本文确实提出了一些建议的解决方法，使用JavaScript或ActiveX可以将密钥发送到用户浏览器，尽管它们并不理想，并且依赖于更改浏览器的安全设置。

或者，您可以旋转内容而不是页面方向。这可以通过创建一种样式并将其应用于包含这两行的主体来完成，但这也有缺点，从而造成许多对齐和布局问题。我发现的最后替代方法是在PDF中创建横向版本。您可以指向，以便当用户选择打印时它会打印PDF。但是我无法在IE7中自动打印。

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

总而言之，在某些浏览器中，使用@page size选项相对容易，但是在许多浏览器中不确定，这取决于您的内容和环境。
这也许就是为什么Google文档在选择打印后会创建PDF，然后允许用户打开并打印该PDF的原因。

评论

---

奇怪的是，它说“大小”可以是风景，而实际上却是“方向”。

– Magnus Smith
09年11月10日在16:20

---

@page size似乎不适用于所有现代浏览器，仅适用于Firefox。据我所知，Chrome和Opera都无视这一点。

– Justin808
2011年5月17日在22:43

---

size：尽管@page规则是CSS2.1的一部分，landscape不是CSS2.1的一部分。但是，它是CSS3的一部分。为了进行确认，请尝试使用W3C CSS验证程序并输入@page {size：landscape}，然后将结果与“个人资料”设置为2.1级和3级进行比较。

– daiscog
2011年11月2日，10：56

---

当div占据页面宽度或高度的100时，旋转不会使div占据纵向页面的空间，而是旋转一个横向的scape。因此，div的某些部分不在页面内。

–奥利弗
2014年1月12日，下午2:28

---

@AbeerSul-说实话，关于CSS，在IE中有效的是;）

–托尼
17 Mar 29 '17 at 22:06

---

#2 楼

我的解决方案：

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

这适用于IE，Firefox和Chrome

#3 楼

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

首先将主体margin设置为0，因为否则页边距将大于在打印对话框中设置的页边距。还要设置background颜色以使页面可视化。所需的打印边距。在打印对话框中，您必须设置相同的页边距（在此示例中为10mm）。

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

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

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

我使用276mm而不是277mm，因为不同的浏览器对页面的缩放略有不同。因此，其中一些将在两页上打印277毫米高的内容。第二页将为空。使用276mm更为安全。

在打印页面上不需要任何margin，border，background，padding，因此将其删除：
请注意，变换的起源是margin！另外，横向页​​面的内容必须向下移动276mm！

如果纵向和横向页面混合使用，IE也会缩小页面。我们通过将border设置为1.665来解决此问题。如果将其设置为1.6666或类似的内容，有时页面内容的右边框可能会被裁剪。 。但是对于足够现代的浏览器来说，则不是必需的。

这里是一个测试页：

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

#4 楼

引用自CSS-Discuss Wiki

@page规则在
scope中已从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），但是
不可适用于具有
此功能或已将其打开的用户。

#5 楼

如前所述，您所追求的是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文档的链接。

#6 楼

尝试将其添加到您的CSS：

@page {
  size: landscape;
}