可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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 answer¹ is deprecated². 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>

Can anyone come up with something that does work?

Assume Chrome, IE11 or Edge.

Background

The reason i'm doing this, of course, is that i need to print landscape. In my particular case i will be using the rich markup and layout services available in HTML to print on an 8.5x11" piece of tri-perforated paper:

I want to go down the strips vertically, except that means having to have the text, images, and layout, be horizontal on the page:

Bonus Reading

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

回答1:

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>

回答2:

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 (i.e., "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.