如何在横向打印HTML？
Ian*_*oyd 7 html printing landscape
这个问题已经被提出并得到了回答,但是受到大力支持的答案都得到了回答:
- 没有解释如何做到这一点
- 不起作用
当然,原因是已接受的答案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,IE11或Edge.
背景
当然,我这样做的原因是我需要打印景观.在我的特定情况下,我将使用HTML中提供的丰富标记和布局服务在8.5x11"三孔纸上打印:
我想垂直向下走,除了意味着必须让文字,图像和布局在页面上是水平的:
奖金阅读
有点老套，我只在 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>
| 归档时间： |
|
| 查看次数： |
24589 次 |
| 最近记录： |