如何横向打印 HTML？

Question

此问题已被提出并回答，但获得高度赞成的答案是：

没有解释怎么做
无效

原因当然是接受的答案¹ is deprecated²。而且 W3C 还没有提出任何标准替代品。这给我留下了一个问题，因为我有实际的事情需要完成。

如何让浏览器横向打印内容？

无效的示例

我拼凑了一个示例，其中包含我能找到的所有口香糖片段。

<!DOCTYPE html>
<HEAD>
<STYLE type="text/css">

/*  */
@page
{
size: landscape;
}

/* http://www.devx.com/tips/Tip/32962 */
@media print{
@page {
 size: landscape
}
}

/*  */
@media print{
.class-name{
    @page{
        size:landscape;
    }
}
}
</STYLE>

<!-- -->
<STYLE type="text/css" media="print">
  @page { size: landscape; }
</STYLE>

</HEAD>

<BODY>
Hello, landscape.
</BODY>

</HTML>

有谁能想出一些可行的办法吗？

假定 Chrome，IE11 或 Edge。

背景

我这样做的原因当然是我需要打印风景。在我的特殊情况下，我将使用 HTML 中可用的丰富标记和布局服务在 8.5x11" 的三孔纸上打印：

我想垂直向下移动条带，但这意味着必须让文本、图像和布局在页面上保持水平：

红利阅读

Landscape printing from HTML
How can I define a CSS class to set the printed page in landscape mode?
Print in Landscape format
W3C CSS Print Profile
Printing an HTML Page in Landscape Mode
Is @Page { size:landscape} obsolete?
CSS Paged Media Module Level 3

Answer 1

欢迎您对针对横向视图打印优化的应用程序的输出进行预格式化，但您不太可能看到允许标记语言以您描述的方式控制外围硬件的软件实现。这是因为这样做可能存在潜在风险，因为打印机 "driver" 与 "ring-0"（内核，在 x86 体系结构中）很接近。

唯一安全的解决方案（从安全角度来看）是向您的用户提供说明，让他们在打印对话框中使用横向设置进行打印。使用 CSS，您可以创建这样优化的输出纵向视图（即，"hiding" 不适合的列；对长数据项执行“...”以使其压缩合身等）；但是带有非常明显的 "WARNING: Landscape view required, please select landscape when printing" 类型的消息；但这更多是 UI/UX 而非技术问题。

Answer 2

有点老套，我只在 CHrome 上测试过...灵感来自 Different page orientation for printing HTML

正如我在上面的评论中指出的那样，对于一页解决方案，这可能适合您。您可以调整一些尺寸等。

<html>

<head>
  <style type="text/css">
    h3 {
      text-align: center;
    }
    .receipt {
      height: 8.5in;
      width: 33%;
      float: left;
      border: 1px solid black;
    }
    .output {
      height;
      8.5in;
      width: 11in;
      border: 1px solid red;
      position: absolute;
      top: 0px;
      left: 0px;
    }
    @media print {
      .output {
        -ms-transform: rotate(270deg);
        /* IE 9 */
        -webkit-transform: rotate(270deg);
        /* Chrome, Safari, Opera */
        transform: rotate(270deg);
        top: 1.5in;
        left: -1in;
      }
    }
  </style>

</head>

<body>
  <div class="output">
    <div class="receipt">
      <h3>Cashier</h3>
    </div>
    <div class="receipt">
      <h3>Customer</h3>
    </div>
    <div class="receipt">
      <h3>File</h3>
    </div>
  </div>
</body>

</html>

如何横向打印 HTML？

How to print HTML in landscape?

html

printing

landscape

无效的示例

背景

红利阅读