gpt4 book ai didi

html - 如何横向打印 HTML?

转载 作者:太空狗 更新时间:2023-10-29 14:19:18 25 4
gpt4 key购买 nike

这个问题已经被问到并回答了,但是被广泛接受的答案是:

  • 没有解释怎么做
  • 不工作

原因当然是接受的答案 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"的三孔纸上打印:

enter image description here

我想垂直向下移动 strip ,但这意味着必须让文本、图像和布局在页面上保持水平:

enter image description here

红利阅读

最佳答案

有点老套,我只在 CHrome 上测试过...灵感来自 Different page orientation for printing 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>

enter image description here

关于html - 如何横向打印 HTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31969122/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com