如何横向打印 HTML？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31969122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to print HTML in landscape?
提问by Ian Boyd
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 answer1is 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.
原因当然是已接受的答案1已被弃用2。而且 W3C 还没有拿出任何标准的替代品。这给我留下了一个问题，因为我有实际的事情需要完成。
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.
假设 Chrome、IE11 或 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:
当然，我这样做的原因是我需要打印风景。在我的特殊情况下，我将使用 HTML 中可用的丰富标记和布局服务在 8.5x11" 的三孔纸上打印：
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
奖励阅读
采纳答案by Kevin Brown
Kind of hacky and I only tested on CHrome ... inspired by Different page orientation for printing HTML
有点hacky，我只在CHrome上测试过......灵感来自不同的页面方向来打印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>
回答by unrivaledcreations
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).
欢迎您从为横向视图打印优化的应用程序中预格式化输出，但您不太可能看到允许标记语言以您描述的方式控制外围硬件的软件实现。这是因为这样做可能存在潜在风险，因为打印机“驱动程序”靠近“ring-0”（x86 架构中的内核）。
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.
唯一安全的解决方案（从安全的角度来看）是向您的用户提供使用他们的打印对话框中的横向设置进行打印的说明。使用 CSS，您可以创建这样优化的输出的纵向视图（即，“隐藏”不适合的列；对长数据项执行“...”以使其挤入并适合等。 ); 但是有一个非常明显的“警告：需要横向视图，打印时请选择横向”类型的消息；但这更像是一个 UI/UX 问题而不是技术问题。
![Html Outlook 中的垂直文本对齐不居中 [带图片]](/res/img/loading.gif)