How to print HTML in landscape?

 

This question has been asked, and answered, but the heavily upvoted accepted answer both:

  • doesn't explain how to do it
  • does not work

    • The reason, of course, is that the accepted answer1 is deprecated2. And the W3C has not come up with any standard replacement. Which leaves me with a problem, as I have actual things that need to get done.

    How to tell browsers to print content in landscape?

    Example that doesn't work

    I threw together an example that contains every snippet of chewing gum that i could find. 

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

    Kind of hacky and I only tested on CHrome ... inspired by Different page orientation for printing HTML

    As I noted in the comments above, for a one page solution this would probably work out for you. You can adjust some of the sizes and such. 

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

    You're welcome to preformat output from your application optimized for landscape view printing, but you will not likely see an implementation of software that allows a markup language to control peripheral hardware in the manner you described. This is because doing so could be potentially risky, owing to the proximity of a printer "driver" to "ring-0" (the kernel, in x86 architecture).

    The only safe solution (from a security standpoint) is to offer instructions to your users to print using their landscape setting in their print dialogues. Using CSS, you could create a portrait view of your output optimized as such (ie, "hiding" columns that wouldn't fit; doing "...'s" for long data items to make them squeeze in and fit, etc.); but with a VERY noticeable "WARNING: Landscape view required, please select landscape when printing"-type message; but that's more a UI/UX concern than a technical one.

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

    上一篇: 在NestedScrollView中使用Viewpager折叠工具栏布局

    下一篇: 如何在横向上打印HTML？