如何在横向上打印HTML?

这个问题已经被提出并得到解答,但是大部分被接受的答案都是:

  • 并没有解释如何去做
  • 不起作用
  • 原因当然是,接受的答案1已弃用2。 而W3C还没有提出任何标准的替代品。 这给我留下了一个问题,因为我有实际的事情需要完成。

    如何告诉浏览器在横向上打印内容?

    这个例子不起作用

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

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

    一种哈克,我只测试了CHrome ......灵感来源于不同的页面方向,用于打印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>

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

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

    链接地址: http://www.djcxy.com/p/28149.html

    上一篇: How to print HTML in landscape?

    下一篇: How do I format numbers within Bosun templates?