如何在横向中打印HTML？

时间：2015-08-12 15:10:44

标签： html printing landscape

这个问题已经被提出并得到了回答，但是受到了很多人赞同的回答：

  • 没有解释如何做到这一点
  • 不起作用

当然，原因是已接受的答案 1 已被弃用 2 。并且W3C没有提出任何标准替代品。这让我有一个问题，因为我有实际需要完成的事情。

如何告诉浏览器以横向打印内容？

不起作用的例子

我把一个包含我能找到的每一片口香糖的例子汇总在一起。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<HEAD>
<STYLE type="text/css">

/* https://stackoverflow.com/a/1392794/12597 */
@page
{
size: landscape;
}

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

/* https://stackoverflow.com/a/16655216/12597 */
@media print{
.class-name{
    @page{
        size:landscape;
    }
}
}
</STYLE>

<!--https://stackoverflow.com/a/13684191/12597 -->
<STYLE type="text/css" media="print">
  @page { size: landscape; }
</STYLE>

</HEAD>

<BODY>
Hello, landscape.
</BODY>

</HTML>
＆＃13;
＆＃13;
＆＃13;

任何人都能想出一些有用的东西吗？

假设Chrome，IE11或Edge。

背景

我这样做的原因当然是我需要打印风景。在我的特定情况下，我将使用HTML中提供的丰富标记和布局服务在8.5x11＆＃34;一张三孔纸：

enter image description here

我想垂直向下走，除了意味着必须让文字，图像和布局在页面上是水平的：

enter image description here

奖金阅读

2 个答案:

答案 0 :(得分：3)

有点hacky，我只在CHrome上测试过...受到Different page orientation for printing HTML

的启发

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

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

enter image description here

答案 1 :(得分：0)

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

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

相关问题
最新问题