如何横向打印 HTML？

Posted 2023-03-10

技术标签:

【中文标题】如何横向打印 HTML？【英文标题】：How to print HTML in landscape? 【发布时间】：2015-08-12 15:10:44 【问题描述】：

已经提出并回答了这个问题，但被大量接受的答案都是：

没有解释怎么做不起作用

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

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

不起作用的示例

我整理了一个示例，其中包含我能找到的每一种口香糖。

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

/* https://***.com/a/1392794/12597 */
@page

size: landscape;


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



/* https://***.com/a/16655216/12597 */
@media print
.class-name
    @page
        size:landscape;
    


</STYLE>

<!--https://***.com/a/13684191/12597 -->
<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

【问题讨论】：

也许很棘手，但至少这是一个选择：***.com/questions/14903427/… 是单页打印要求吗？从示例来看，内容似乎没有从列流向其他页面。这是一个正确的假设吗？ @KevinBrown 天哪；我没有考虑过。现在这些收据是 4.25"x10.5"（8.5x11" 的一半）、3 层、复写、点阵、针式进纸。如果一页上没有足够的空间，它执行换页并继续下一页。因此可能不止一页；但假设这个问题只有一页。好吧，我会按照上面@Holt 在链接文章中的建议解决它。如果是单页解决方案，您可以使用轮换来完成任务。我知道，对我来说听起来也很奇怪。我做了一些测试，它会很容易工作。您确实必须注意，您需要一些顶部，左侧的旋转偏移量。 【参考方案1】：

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

正如我在上面的 cmets 中所指出的，对于单页解决方案，这可能适合您。您可以调整一些大小等。

<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>

【讨论】：

【参考方案2】：

欢迎您预先格式化针对横向打印优化的应用程序的输出，但您不太可能看到允许标记语言以您描述的方式控制外围硬件的软件实现。这是因为这样做可能存在潜在风险，因为打印机“驱动程序”靠近“ring-0”（内核，在 x86 架构中）。

唯一安全的解决方案（从安全角度来看）是向您的用户提供说明，让他们在打印对话框中使用横向设置进行打印。使用 CSS，您可以创建这样优化的输出的纵向视图（即，“隐藏”不适合的列；对长数据项执行“...”以使其挤入并适合等。 );但带有非常明显的“警告：需要横向视图，打印时请选择横向”类型的消息；但这更多是 UI/UX 问题，而不是技术问题。

【讨论】：

问题在于打印网页的不是用户。它将是一个嵌入式浏览器（例如 Chromium Embedded、MSHTML），它将打印到打印机。我宁愿使用丰富的 HTML 标记来设计打印输出（并利用现有 20 年前的横向渲染 HTML 概念），而不是自己打开打印机设备上下文并向打印机 DC 发出手动 GDI 绘图命令。感谢您的澄清。我也同意您的方法：使用渲染引擎来解释您的标记是创建输出的一种非常简单的方法。这一定是非常令人沮丧的，因为在你的情况下，一个非标准的标准从你的下面被拉出来了，看起来！希望有人能出现并弄清楚如何以编程方式将输出从嵌入式框架移动到横向打印机。抱歉，我误解了这个问题，希望其他人能提供更多帮助。

以上是关于如何横向打印 HTML？的主要内容，如果未能解决你的问题，请参考以下文章

[Q]如何设置pdfFactory打印机纸张方向为横向